font-feature-settings

Базовая линия Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с апреля 2017 года.

Свойство font-feature-settings CSS управляет расширенными типографическими функциями в шрифтах OpenType.

Попробуйте

Синтаксис

/* Use the default settings */
font-feature-settings: normal;

/* Set values for OpenType feature tags */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
  "smcp",
  "swsh" 2;

/* Global values */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: revert;
font-feature-settings: revert-layer;
font-feature-settings: unset;

В идеале веб-разработчики должны использовать сокращённое свойство font-variant или связанные свойства, такие как font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric или font-variant-position.

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

Значения

Это свойство задаётся либо ключевым словом normal или списком значений <feature-tag-value> через запятую. При отрисовке текста список значений <feature-tag-value> шрифта OpenType передаётся в движок макета текста для включения или выключения функций шрифта.

normal

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

<feature-tag-value>

Представляет собой кортеж, состоящий из имени тега и необязательного значения, разделённых пробелом.

Имя тега всегда является <string> из четырёх ASCII символов. Если имя тега содержит больше или меньше символов, или содержит символы, выходящие за рамки диапазона кодовых точек U+20 – U+7E, описание считается недопустимым.

Необязательное значение может быть положительным целым числом или ключевыми словами on или off. Ключевые слова on и off являются синонимами значений 1 и 0 соответственно. Если значение не задано, значение по умолчанию 1 . Для функций OpenType, не являющихся булевыми (например, стилистические альтернативы), значение подразумевает выбор конкретного глифа; для булевых функций значение включает или отключает функцию.

Формальное определение

Начальное значение	`normal`
Применяется к	всем элементам и тексту. Также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

Формальный синтаксис

font-feature-settings = 
  normal                |
  <feature-tag-value>#  

<feature-tag-value> = 
  <opentype-tag> [ <integer [0,∞]> | on | off ]?  

<opentype-tag> = 
  <string>

Примеры

Включение различных функций шрифтов

/* use small-cap alternate glyphs */
.small-caps {
  font-feature-settings: "smcp" on;
}

/* convert both upper and lowercase to small caps (affects punctuation also) */
.all-small-caps {
  font-feature-settings: "c2sc", "smcp";
}

/* use zeros with a slash through them to differentiate from "O" */
.nice-zero {
  font-feature-settings: "zero";
}

/* enable historical forms */
.historical {
  font-feature-settings: "hist";
}

/* disable common ligatures, usually on by default */
.no-ligatures {
  font-feature-settings: "liga" 0;
}

/* enable tabular (monospaced) figures */
td.tabular {
  font-feature-settings: "tnum";
}

/* enable automatic fractions */
.fractions {
  font-feature-settings: "frac";
}

/* use the second available swash character */
.swash {
  font-feature-settings: "swsh" 2;
}

/* enable stylistic set 7 */
.fancy-style {
  font-family: Gabriola;
  font-feature-settings: "ss07";
}

Спецификации

Спецификация
CSS Fonts Module Level 4 # font-feature-settings-prop

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`font-feature-settings`	4816	15	34 Предлагается использовать функцию `ssty` для предоставления вариантов глифов, более подходящих для использования в сценариях (например, штрихов, используемых в качестве надстрочных индексов). Начиная с Firefox 29, это делается автоматически движком рендеринга MathML. Предлагается также применять функцию `dtls` к буквам при размещении математических акцентов, чтобы получить формы без точек (например, без точек i, j с крышкой). Начиная с Firefox 35, это делается автоматически движком рендеринга MathML. Вы можете переопределить значения по умолчанию, определённые движком рендеринга MathML, с помощью CSS. 129 Начиная с Firefox 129, был добавлен псевдоним `-webkit-font-feature-settings` для поддержки сайтов, которые всё ещё используют префикс производителя. 15 С Firefox 4 до Firefox 14 включительно Firefox поддерживал более старый, немного другой синтаксис. См. Поддержка функций шрифтов OpenType в Firefox 4.	3515	9.1	4818	34 Предлагается использовать функцию `ssty` для предоставления вариантов глифов, более подходящих для использования в сценариях (например, штрихов, используемых в качестве надстрочных индексов). Начиная с Firefox 29, это делается автоматически движком рендеринга MathML. Предлагается также применять функцию `dtls` к буквам при размещении математических акцентов, чтобы получить формы без точек (например, без точек i, j с крышкой). Начиная с Firefox 35, это делается автоматически движком рендеринга MathML. Вы можете переопределить значения по умолчанию, определённые движком рендеринга MathML, с помощью CSS. 129 Начиная с Firefox 129, был добавлен псевдоним `-webkit-font-feature-settings` для поддержки сайтов, которые всё ещё используют префикс производителя. 15 С Firefox 4 до Firefox 14 включительно Firefox поддерживал более старый, немного другой синтаксис. См. Поддержка функций шрифтов OpenType в Firefox 4.	3514	9.3	5.01.0	4.4
`normal`	16	15	15	15	9.1	18	15	14	9.3	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings