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
сокращенном виде и не могут быть объявлены с использованием каких-либо отдельных свойств в сокращенном формате.
Дополнительная информация
- Спецификация W3C
- Статья CSS-Tricks: px - em -% - pt - keyword
- Джонатан Снук: размер шрифта с rem
- Учебник по сокращенному свойству шрифтов CSS
- Шпаргалка по свойствам сокращенного шрифта CSS
Поддержка браузера
Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
---|---|---|---|---|---|---|
Любой | Любой | Любой | Любой | Любой | Любой | Любой |