Настройки-особенности-шрифта - CSS-хитрости

Anonim

Это свойство дает нам контроль над расширенными типографскими настройками, такими как капители, лигатуры и росчерки. Для того, чтобы активировать их , вы должны объявить , какое значение нужно в кавычках , а затем следует либо 1или onвключить. Кроме того , вы можете отключить их либо 0или off:

.element ( /* these two values do the same thing */ font-feature-settings: "liga" 1; font-feature-settings: "liga1" on; )

font-feature-settingsСвойство поддерживает многие другие значения, помимо стандартных лигатур , включая маленькие заглавные буквы:

.element ( font-feature-settings: "smcp" 1; )

Значения

Это список всех значений, которые поддерживаются font-feature-settings, но убедитесь, что веб-шрифт, который вы используете, поддерживает эти значения, прежде чем пробовать их:

  • liga: стандартные лигатуры
  • dlig: дискреционные лигатуры
  • onum: фигурки в старинном стиле
  • lnum: подкладка фигур
  • tnum: табличные цифры
  • zero: перечеркнутый ноль
  • frac: фракции
  • sups: надстрочный индекс
  • subs: нижний индекс
  • smcp: маленькие заглавные буквы
  • c2sc: заглавные буквы из столиц
  • case: формы с учетом регистра
  • hlig: исторические лигатуры
  • calt: контекстные альтернативы
  • swsh: swashes
  • hist: исторические формы
  • ss**: стилистические наборы
  • kern: kerning
  • locl: локализованные формы
  • rlig: требуются лигатуры
  • medi: медиальные формы
  • init: начальные формы
  • isol: изолированные формы
  • fina: окончательные формы
  • mark: отметка
  • mkmk позиционирование от метки до метки

Объединение нескольких настроек

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

.element ( font-feature-settings:"smcp" 1, "onum" 1; )

Префиксы

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

.element ( -webkit-font-feature-settings: "smcp" 1; -moz-font-feature-settings: "smcp" 1; -ms-font-feature-settings: "smcp" 1; font-feature-settings: "smcp" 1; )

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

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Хром Fire Fox IE Край Сафари
21 * 15 * 10 12 9.1

Мобильный / планшет

Android Chrome Android Firefox Android iOS Safari
88 85 4,4 * 9,3

Дополнительная информация

  • Typotheque: Возможности OpenType в веб-браузерах - Тесты
  • W3C
  • MDN
  • Песочница CSS3 Ричарда Раттера