Шрифт - CSS-хитрости | CSS Альманах 2025

fontСвойство в CSS есть свойство стенографии , что сочетает в себе все следующие суб-свойства в одной декларации.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Есть семь fontдополнительных свойств, в том числе:

font-stretch: это свойство устанавливает ширину шрифта, например сжатую или расширенную.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: делает текст курсивным или наклонным.
- normal
- italic
- oblique
- inherit
font-variant: изменяет целевой текст на маленькие заглавные.
- normal
- small-caps
- inherit
font-weight: устанавливает вес или толщину шрифта.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: устанавливает высоту шрифта.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: определяет количество пространства над и под встроенными элементами.
- normal
- number (font-size multiplier)
- percentage
font-family: определяет шрифт, применяемый к элементу.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Замечания о сокращении шрифтов

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

Вот краткое изложение некоторых вещей, которые вы должны знать при использовании этого сокращенного свойства.

Обязательные значения

Два fontсокращенных значения являются обязательными: font-sizeи font-family. Если любой из них не включен, все объявление будет проигнорировано.

Кроме того, font-familyдолжно быть объявлено последним из всех значений, иначе, опять же, все объявление будет проигнорировано.

Необязательные значения

Все пять других значений необязательны. Если вы включаете какие-либо из font-style, font-variantи font-weight, они должны стоять перед font-sizeобъявлением. В противном случае они будут проигнорированы, а также могут привести к игнорированию обязательных значений.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

В приведенном выше примере включены три варианта. Если они определены ранее font-size, их можно размещать в любом порядке.

Включение line-heightтакже необязательно, но может быть объявлено только после font-sizeи только после косой черты:

body ( font: 44px/20px Georgia, sans-serif; )

В приведенном выше примере line-heightэто «20 пикселей». Если вы опустите line-height, вы также должны опустить косую черту, иначе вся строка будет проигнорирована.

Использование font-stretch

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

Спецификация рекомендует включить резервный вариант без font-stretch, например:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Наследование опционалов

Если вы опустите какое-либо из дополнительных значений (включая line-height), пропущенные дополнительные параметры не будут наследовать значения от своего родительского элемента, как это часто бывает с типографскими свойствами. Вместо этого они будут сброшены в исходное состояние.

Например:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

В этом случае необязательные значения (курсив, заглавные буквы и полужирный шрифт) помещаются в fontобъявление элемента. Это также применимо к большинству дочерних элементов.

Однако, поскольку мы повторно объявили fontсвойство для элементов абзаца, все дополнительные параметры будут сброшены в абзацах, в результате чего стиль, вариант, вес и высота строки вернутся к своим начальным значениям.

Ключевые слова для определения системных шрифтов

В дополнение к приведенному выше синтаксису fontсвойство также позволяет использовать ключевые слова в качестве значений. Они есть:

caption
icon
menu
message-box
small-caption
status-bar

Эти значения ключевых слов устанавливают шрифт, который используется в операционной системе пользователя для этой конкретной категории. Например, определение «заголовка» установит шрифт этого элемента на использование того же шрифта, который используется в операционной системе для элементов управления с заголовками (кнопок, раскрывающихся списков и т. Д.).

Одно ключевое слово включает в себя все значение:

body ( font: menu; )

Другие свойства, упомянутые ранее, не действительны в сочетании с этими ключевыми словами. Эти ключевые слова могут использоваться только в fontсокращенном виде и не могут быть объявлены с использованием каких-либо отдельных свойств в сокращенном формате.