Как сделать толщину шрифта в css

Толщина шрифта css – Правила Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в CSS

CSS свойство font-size задает размер шрифта элемента.

Поддержка браузерами

Значения свойства

Значение Описание
medium Устанавливает размер шрифта среднего размера. Это значение по умолчанию.
small Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов).
x-small Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов).
xx-small Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов).
smaller Устанавливает размер шрифта меньшего размера, чем у родительского элемента.
large Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов).
x-large Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов).
xx-large Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов).
larger Устанавливает размер шрифта большего размера, чем у родительского элемента.
length Устанавливает размер шрифта фиксированного размера (в единицах измерения CSS — px, em, cm и др.).
% Задает размер шрифта в процентах от размера шрифта родительского элемента.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

font-size — размер текста | CSS справочник

Поддержка браузерами


 
 
 
 
 













12.0+ 5.5+ 1.0+ 1.0+ 7.0+ 1.0+

Описание

CSS свойство font-size позволяет увеличивать или уменьшать размер текста. Установка размера текста, в свою очередь, может изменить размеры других элементов, так как размер текста используется для вычисления значения таких единиц измерения как em и ex .

Примечание: для изменения цвета текста используется CSS свойство color, для изменения стиля — font-style, для выравнивания — text-align, а для добавления тени — text-shadow.

Синтаксис

Значения свойства





















































Значение Описание
xx-small Сверх мелкий размер шрифта.
x-small Очень маленький размер шрифта.
small Маленький размер шрифта.
medium Средний размер шрифта.
large Большой размер шрифта.
x-large Очень большой размер шрифта.
xx-large Огромный размер шрифта.
smaller Маленький размер шрифта в сравнении с родительским элементом.
larger Большой размер шрифта в сравнении с родительским элементом.
размер Указания размера с помощью единиц измерения, используемых в CSS.
% Определение размера шрифта в процентом соотношении от родительского элемента.
inherit Указывает, что значение наследуется от родительского элемента.
Пример


 Попробуйте изменить размер текста, кликнув на нужное значение.

css размер шрифта

Как уже упоминалось в прошлой статье, любой элемент на странице может быть задан произвольными размерами вычисляемый в миллиметрах, пикселах и процентах. Сегодня поговорим более детально о размерах шрифта (далее РШ) в стилях css.

РШ при разметке страницы задают либо в миллиметрах em, либо в пикселах px для атрибута font-size. Использование РШ в процентах, в виду большого разброса в масштабировании, не получило большого применения.

Насчет применения миллиметров или пикселей для единиц измерения для РШ здесь уже выбирать лично вам. Как вам будет удобней.


Но поскольку, по умолчанию, во многих программах Word, Exel, Photoshop единица измерения уже установлена в пикселах, будем рассматривать все примеры РШ также в пикселах.

Кроме того, существует специальный атрибут font-weight. ;, который отвечает, каким будет шрифт: жирным или обычным.

Задается несколькими способами либо в цифрах или в строковом формате. Если задать жирность в цифрах, то для атрибута font-weight пропишем цифру 100 для простого шрифта, или 500 для жирного. Для того, чтобы прописать в строковом формате существует лишь два параметра bold и normal; Есть и другие параметры light, medium, demi bold, но многие шрифты их не поддерживают, поэтому в строковом формате есть только два понятия жирный и простой (нежирный шрифт).

Также следует иметь в виду, что если не указывать атрибут font-weight, то по умолчанию, браузер установит нежирный простой шрифт.

Чтобы задать межстрочный интервал нужно прописать параметры для атрибута line-height. Допустим, если мы указали РШ 14 пикселей, то и для атрибута line-height, желательно нужно указать также 14 рх.

 Итак, зададим РШ в файле стилей для нашего сайта.


В этом примере мы прописали РШ для всех шрифтов, которые есть на странице. Но, для которых еще не прописаны стили для каждого элемента.

Если мы хотим указать другие параметры атрибута h2 для заголовка страницы, то нужно указать об этом внутри файла стилей. Например,


А для основного контента зададим РШ 14 пикселей. Для простоты пропишем его для тега обычного текста <p>.
&#13; Вот таким образом:
&#13;

По умолчанию, выравнивание текста производится по левому краю. Если вам нужны другие параметры, измените атрибут text-align, который может принимать четыре параметра – left, right, justify, center. На простом человеческом языке это обозначает:

1. Left текст выравнивается по левому краю
&#13; 2. Right текст выравнивается по правому краю
&#13; 3. justify, текст автоматически занимает всю ширину страницы и выравнивается по левому и правому краю.
&#13; 4. Center – текст подгоняется только по центру страницы.

Во всех примерах точкой отсчета является родительский элемент. Если мы прописали эти атрибуты для тега <p>…</p>, то все элементы находящиеся внутри этого парного тега будут обладать свойствами, заданные для родительского элемента.

Вот и вся информация по поводу РШ на ваших веб страницах. Если у вас есть иная информация, или у вас есть вопросы. Вы всегда можете отправить ваш комментарий, заполнив форму внизу страницы.
&#13;

Шрифт

Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.

font-variant

Определяет, как нужно представлять строчные буквы &#8212; оставить их без модификаций или делать их все прописными уменьшенного размера.

font-style

Определяет начертание шрифта &#8212; обычное, курсивное или наклонное.

font-size

Определяет размер шрифта элемента.

font-family

Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.

font-weight

Устанавливает насыщенность шрифта.

Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *