Свойства шрифта (Font Properties)

Свойство	Описание
font	Свойства (стиль, вариант, вес, размер) шрифта, высоту строки и семейство шрифтов.
font-style	Стиль шрифта (курсив, наклонный, обычный)
font-variant	Вариант шрифта (маленькие, обычный)
font-weight	Вес или жирность шрифта
font-size	Размер шрифта
line-height	Высота, используемая при расчете высоты строкового блока для встроенного элемента. Минимальная высота строки для блочного элемента
font-family	Список имен семейств шрифтов для применения к элементу

Совместимость с браузером

Свойство
font	✔	✔	✔	✔	✔	✔
font-family	✔	✔	✔	✔	✔	✔
font-size	✔	✔	✔	✔	✔	✔
font-style	✔	✔	✔	✔	✔	✔
font-variant	✔	✔	✔	✔	✔	✔
font-weight	✔	✔	✔	✔	✔	✔
line-height	✔	✔	✔	✔	✔	✔

CSS: font (шрифт)

Описание

Свойство CSS font — это сокращенное свойство для установки CSS свойств font-style, font-variant, font-weight, font-size, line-height и font-family.

Синтаксис

Синтаксис CSS-свойства font следующий:

font: font-style font-variant font-weight font-size [/ line-height] font-family;

Пример

Мы обсудим свойство CSS font ниже, исследуя примеры того, как использовать это свойство в CSS.

p { font : 16px Arial, Helvetica, sans-serif; }

В этом примере CSS font мы установили размер шрифта на 16 пикселей. Мы установили семейство шрифтов в теге  на первое месте Arial. Если Arial недоступен, браузер попробует Helvetica. Если Helvetica недоступна, браузер попробует универсальное семейство шрифтов, называемое sans-serif.

Далее, давайте посмотрим на пример CSS font, где у нас есть пробелы в значении семейства шрифтов.

span { font : 14px "Comic Sans MS", cursive; }

В этом примере CSS font мы установили размер шрифта на 14 пикселей. Затем мы установили семейство шрифтов Comic Sans MS, в имени которого есть пробелы. В этом случае семейство должно быть заключено в кавычки следующим образом: «Comic Sans MS». Если Comic Sans MS недоступен, браузер попробует общее семейство шрифтов, называемое cursive.

CSS: font-style (стиль шрифта)

В этом руководстве по CSS объясняется, как использовать свойство CSS, называемое font-style, с синтаксисом и примерами.

Синтаксис

Синтаксис свойства CSS стиля шрифта:

font-style : value;

Параметры или аргументы

Параметр является необязательным. Если font-style не указан, то по умолчанию используется значение normal. Параметр принимает следующие значеня:

Значение	Описание
normal	Обычный стиль шрифта p { font: normal 12px Verdana, Geneva, sans-serif; }
italic	Стиль шрифта Italic (если курсив недоступен, вместо него отображается наклонный) p { font: italic 12px Verdana, Geneva, sans-serif; }
oblique	Наклонный стиль шрифта p { font: oblique 12px Verdana, Geneva, sans-serif; }

Примечание

Курсивные стили шрифта — это курсивные версии шрифта.
Наклонные шрифты — это наклонные версии шрифта.

Пример

Мы обсудим свойство font-style ниже, исследуя примеры использования этого свойства в CSS.

Использование курсива

Давайте посмотрим на пример CSS font-style, где мы установили стиль шрифта на курсив.

span { font-style : italic; }

В этом примере стиля шрифта CSS мы установили стиль шрифта текста в теге на курсив.

Использование наклонной

Далее, давайте посмотрим на пример CSS font-style, где мы установили стиль шрифта в oblique

span { font-style : oblique; }

В этом примере CSS font-style мы установили стиль шрифта текста в теге на наклонный.

CSS: font-variant (регистр шрифта)

В этом руководстве по CSS объясняется, как использовать свойство CSS, называемое font-variant, с синтаксисом и примерами.

Описание

Свойство CSS font-variant определяет регистр шрифта, например, маленькие заглавные или обычные.

Синтаксис

Синтаксис свойства CSS регистр шрифта:

font-variant: value;

Параметры или аргументы

Параметр является необязательным. Если font-variant не указан, то по умолчанию используется значение normal. Параметр принимает следующие значеня:

Значение	Описание
normal	Обычный вариант шрифта p { font: normal 10px Georgia, "Times New Roman", Times, serif; }
small-caps	Вариант шрифта с маленькими заглавными буквами p { font: small-caps 10px Georgia, "Times New Roman", Times, serif; }

Примечание

Если в качестве варианта шрифта выбраны заглавные буквы , а шрифт с заглавными буквами недоступен, некоторые браузеры попытаются имитировать шрифт с заглавными буквами.

Пример

Ниже мы обсудим свойство font-variant, изучая примеры использования этого свойства в CSS.
Свойство font-variant можно применять к различным тегам HTML.

Тег

Например, мы могли бы оформить тег  следующим образом:

span { font-variant : normal; }

или

span { font-variant : small-caps; }

или

span { font-variant : inherit; }

Это примеры того, как можно оформить тег , используя свойство font-variant.

Тег

Вы также можете применить это свойство CSS к тегу  :

p { font-variant : normal; }

или

p { font-variant : small-caps; }

или

p { font-variant : inherit; }

В этих примерах текст внутри тега  будет оформлен путем установки варианта шрифта в CSS.

Тег <div>

Если вы хотите стилизовать тег <div>, вы должны использовать следующий CSS:

div { font-variant : normal; }

или

div { font-variant : small-caps; }

или

div { font-variant : inherit; }

Это примеры того, как использовать свойство font-variant с тегом <div>.

СОВЕТ. Свойство font-variant не ограничивается только этими тегами, вы можете использовать его для стилизации других элементов HTML.

CSS: font-weight (толщина шрифта)

В этом учебном пособии по CSS объясняется, как использовать свойство CSS, называемое font-weight, с синтаксисом и примерами.

Описание

Свойство CSS font-weight определяет толщину шрифта.

Синтаксис

Синтаксис CSS-свойства font-weight:

font-weight: value;

Параметры или аргументы

Параметр является необязательным. Если font-weight не указан, то по умолчанию используется значение normal. Параметр принимает следующие значеня:

Значение	Описание
normal	Нормальная жирность шрифта (Нормальный = 400 жирность шрифта) p { font: normal 12px "Courier New", Courier, monospace; }
bold	Полужирный шрифт (полужирный = 700 жирность шрифта) p { font: bold 12px "Courier New", Courier, monospace; }
bolder	На один шрифт темнее, чем его родительский элемент p { font: bolder 12px "Courier New", Courier, monospace; }
lighter	На один шрифт светлее, чем его родительский элемент p { font: lighter 12px "Courier New", Courier, monospace; }
100, 200, 300, 400, 500, 600, 700, 800, 900	Числовые значения жирности шрифта находятся в диапазоне 100-900, где 100 - самый светлый, а 900 - самый жирный. 400 = normal, and 700 = bold. p { font: 400 12px "Courier New", Courier, monospace; }

Примечание

Некоторые шрифты могут поддерживать только обычное и жирное начертания.
Если указан числовая толщина шрифта в диапазоне 600–900, но точный числовая толщина недоступна, будет использоваться ближайший доступный более темная толщина шрифта.
Если указан числовая толщина шрифта от 100 до 500, а точная числовая толщина недоступна, будет использоваться ближайший доступный более легкий шрифт.

Пример

Мы обсудим свойство font-weight ниже, исследуя примеры использования этого свойства в CSS.

Использование жирного шрифта

Давайте посмотрим на пример веса шрифта CSS, где мы выделяем текст полужирным шрифтом.

span { font-weight : bold; }

В этом примере CSS-шрифта мы установили жирность текста в теге  полужирным шрифтом.

Использование нормального шрифта

Далее, давайте посмотрим на пример размера шрифта CSS, где мы установили обычный текст.

p { font-weight : normal; }

В этом примере CSS-шрифта мы установили нормальную плотность шрифта текста внутри тега .

Использование числового значения

Давайте посмотрим на пример толщины шрифта CSS, где мы устанавливаем для текста числовое значение font-weight.

p { font-weight : 500; }

В этом примере CSS-шрифта мы установили толщину шрифта текста внутри тега  на 500, чтобы использовать более темный шрифт, если он был доступен.

CSS: font-size (размер шрифта)

В этом руководстве по CSS объясняется, как использовать свойство CSS, называемое font-size, с синтаксисом и примерами.

Описание

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

Синтаксис

Синтаксис свойства CSS размера шрифта:

font-size: value;

Параметры или аргументы

Этот параметр обычно бывает востребованным. Он может принимать следующие значеня:

Значение	Описание
fixed	Фиксированное значение, выраженное в px, em, ... p { font: 12px; Arial, Helvetica, sans-serif; } p { font: 14em Arial, Helvetica, sans-serif; }
percentage	Процентное значение p { font: 75% Arial, Helvetica, sans-serif; }
xx-small, x-small, small, medium, large, x-large, xx-large	Размер шрифта ключевого слова варьируется от xx-small до xx-large, где medium — это размер по умолчанию p { font: large Arial, Helvetica, sans-serif; }
smaller, larger	На один размер шрифта больше или меньше размера шрифта родительского элемента p { font: larger Arial, Helvetica, sans-serif; }

Примечание

Когда размер шрифта указан как фиксированное значение в em, размер определяется относительно размера шрифта родительского элемента. Например, 0,75em будет составлять 75% размера шрифта родительского элемента.
Когда размер шрифта указан в процентах, он относится к размеру шрифта родительского элемента.
Изменение размера шрифта элемента может повлиять на размер шрифта других элементов, если эти элементы выражены в em.

Пример

Мы обсудим свойство font-size ниже, исследуя примеры использования этого свойства в CSS.

Использование фиксированного значения

Давайте посмотрим на пример CSS font-size, где мы устанавливаем размер шрифта, используя фиксированное значение.

span { font-size : 14px; }

В этом примере CSS font-size мы установили размер шрифта тега  равным 14px.

Использование процентов

Далее, давайте рассмотрим пример CSS font-size, где мы устанавливаем размер шрифта в процентах.

p { font-size : 90%; }

В этом примере CSS font-size мы установили размер шрифта тега  равным 90% от размера шрифта его родительского элемента.

Использование ключевого слова

Давайте посмотрим на пример CSS font-size, где мы устанавливаем размер шрифта с помощью ключевого слова.

p { font-size : x-small; }

В этом примере CSS font-size мы установили размер шрифта тега  на x-small, что на два размера шрифта меньше, чем размер по умолчанию, который является средним.

CSS: line-height (высота строки)

В этом руководстве по CSS объясняется, как использовать свойство CSS, называемое line-height, с синтаксисом и примерами.

Описание

Свойство CSS line-height определяет высоту, используемую при расчете высоты строки для встроенного элемента, и определяет минимальную высоту строки для блочного элемента.

Синтаксис

Синтаксис свойства CSS line-height:

line-height: value;

Параметры или аргументы

Параметр является необязательным. Это высота, используемая при расчете высоты строчного бокса для встроенного элемента и минимальной высоты строчного бокса для блочного элемента. Он предоставляется вместе со значением размера шрифта. Если font-weight не указан, то по умолчанию используется значение normal. Параметр принимает следующие значеня:

Значение	Описание
normal	Обычное значение, используемое браузерами div { font: 12px/normal Arial, Helvetica, sans-serif; }
number	Безразмерное числовое значение, умноженное на размер шрифта элемента div { font: 12px/1.5 Arial, Helvetica, sans-serif; }
fixed	Фиксированное значение, выраженное в pt, em, ... div { font: 12px/12pt Arial, Helvetica, sans-serif; } div { font: 12px/1.5em Arial, Helvetica, sans-serif; }
percentage	Процентное значение div { font: 12px/150% Arial, Helvetica, sans-serif; }
none	К элементу не применяется высота строки div { font: 12px/none Arial, Helvetica, sans-serif; }

Примечание

Значения Percent и em могут привести к плохому поведению наследования и, вероятно, не должны использоваться. Вместо этого предпочтительно использовать безразмерное числовое значение (например, 1,5).
Когда значение предоставляется в процентах, оно относится к размеру шрифта самого элемента.

Пример

Ниже мы обсудим свойство line-height, изучая примеры использования этого свойства в CSS с фиксированным, а также с процентным значениями.

Использование нормального значения

Давайте посмотрим, как установить нормальную высоту строки.

div { line-height : normal; }

Это будет значение по умолчанию, используемое браузерами. Вы можете оказаться в ситуации, когда высота строки была изменена, и вы хотите вернуть ее к поведению по умолчанию.

Использование числового значения

Давайте рассмотрим пример, в котором высота строки указана как числовое значение без единиц измерения.

div { line-height : 1.2; }

В этом примере CSS line-height мы указали значение 1,2. Это значение представляет собой безразмерное число, которое следует умножить на размер шрифта элемента, чтобы вычислить высоту строки.

Использование фиксированного значения

Давайте посмотрим на пример CSS line-height, где мы указали высоту строки как фиксированное значение, выраженное в пикселях.

div { line-height : 35px; }

В этом примере с CSS line-height мы установили высоту строки на 35 пикселей.

Мы также можем выразить высоту строки как фиксированное значение в em.

div { line-height : 2em; }

В этом примере мы установили высоту строки на 2em.

Использование процентов

Давайте посмотрим на пример, где мы указали высоту строки в процентах.

div { line-height : 125%; }

В этом примере CSS line-height мы установили высоту строки на 125%.

CSS: font-family (семейство шрифтов)

В этом руководстве по CSS объясняется, как использовать свойство CSS, называемое семейством шрифтов, с синтаксисом и примерами.

Описание

Свойство CSS font-family определяет приоритетный список имен семейств шрифтов для применения к элементу.

Синтаксис

Синтаксис свойства CSS семейства шрифтов:

font-family : value;

Параметры или аргументы

Обычно требуемый параметр, который может принимать следующие значеня:

Значение	Описание
family-name	Название семейства шрифтов. Если имя семейства шрифтов содержит пробелы, значение должно быть заключено в кавычки. Вот некоторые из значений фамилий (их гораздо больше): "Times New Roman" Times Verdana Geneva Georgia "Courier New" Courier "Comic Sans MS" p { font: 14px Georgia, "Times New Roman", Times; }
generic-family	Общие семейства шрифтов используются в качестве резервного механизма на случай, если ни одно из других перечисленных семейств недоступно. Эти значения НЕ должны заключаться в кавычки. Родовые имена могут быть одним из следующих: san-serif (без засечек) serif (с засечками) cursive (скоропись) monospace (моноширинный) fantasy (фантазия) p { font: 14px serif; }

Значение

Описание

family-name

Название семейства шрифтов.
Если имя семейства шрифтов содержит пробелы, значение должно быть заключено в кавычки.
Вот некоторые из значений фамилий (их гораздо больше):

"Times New Roman"
Times
Verdana
Geneva
Georgia
"Courier New"
Courier
"Comic Sans MS"

p { font: 14px Georgia, "Times New Roman", Times; }

generic-family

Общие семейства шрифтов используются в качестве резервного механизма на случай, если ни одно из других перечисленных семейств недоступно. Эти значения НЕ должны заключаться в кавычки.
Родовые имена могут быть одним из следующих:

san-serif (без засечек)
serif (с засечками)
cursive (скоропись)
monospace (моноширинный)
fantasy (фантазия)

p { font: 14px serif; }

Примечание

Значения, перечисленные в значении семейства шрифтов , разделены запятыми.
Значения, перечисленные в значении семейства шрифтов , перечислены в приоритете. Таким образом, браузер будет пробовать каждое из семейств шрифтов в указанном порядке, пока не найдет доступное.
Если имя семейства шрифтов содержит пробелы, его необходимо заключить в кавычки. Пример: "Trebuchet MS".
При создании списка семейств шрифтов начните с конкретных имен семейств и закончите одним родовым семейством в конце списка.

Предлагаемые списки семейств шрифтов

Нижеследующие предложения помогут получить представление о том, как создать собственный список семейств шрифтов:

Verdana, Geneva, sans-serif
Georgia, "Times New Roman", Times, serif
"Courier New", Courier, monospace
Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif
"Trebuchet MS", Arial, Helvetica, sans-serif
"Arial Black", Gadget, sans-serif
"Times New Roman", Times, serif
"Palatino Linotype", "Book Antiqua", Palatino, serif
"Lucida Sans Unicode", "Lucida Grande", sans-serif
"MS Serif", "New York", serif
"Comic Sans MS", cursive

Пример

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

p { font : 16px Arial, Helvetica, sans-serif; }

В этом примере шрифта CSS мы установили размер шрифта на 16 пикселей. Мы установили семейство шрифтов в теге на первое Arial. Если Arial недоступен, браузер попробует Helvetica. Если Helvetica недоступна, браузер попробует универсальное семейство шрифтов, называемое sans-serif.

Далее, давайте посмотрим на пример шрифта CSS, где у нас есть пробелы в значении семейства шрифтов.

span { font : 14px "Comic Sans MS", cursive; }

В этом примере шрифта CSS мы установили размер шрифта на 14 пикселей. Затем мы установили семейство шрифтов Comic Sans MS, в имени которого есть пробелы. В этом случае фамилия должна быть заключена в кавычки следующим образом: «Comic Sans MS». Если Comic Sans MS недоступен, браузер попробует общее семейство шрифтов, называемое cursive.