Шрифт - CSS-хитрости

Anonim

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
Любой Любой Любой Любой Любой Любой Любой