CSS-свойство font-feature-settings
Свойство font-feature-settings управляет расширенными типографскими возможностями шрифтов OpenType. Описание свойства и примеры.
Свойство font-feature-settings даёт низкоуровневый контроль над расширенными типографскими возможностями, встроенными в шрифты OpenType — такими как малые прописные, старостильные цифры, лигатуры, дроби и стилистические варианты. Эти возможности создаются дизайнером шрифта и хранятся внутри файла шрифта; font-feature-settings — это переключатель, который включает или отключает их.
Значением является либо ключевое слово normal (по умолчанию), либо список пар <feature-tag-value> через запятую. Каждая пара — это четырёхбуквенный тег функции OpenType, записанный как строка, за которым опционально следует значение:
font-feature-settings: "smcp" 1; /* enable small caps */
font-feature-settings: "smcp" on; /* same thing — "on" means 1 */
font-feature-settings: "smcp", "onum"; /* two features, omitted value defaults to 1 */
font-feature-settings: "liga" 0; /* disable standard ligatures */Ключевые слова on и off являются синонимами 1 и 0. Большинство функций — это простые переключатели вкл/выкл, но некоторые (например, стилистические наборы или варианты символов) принимают более высокое целое число для выбора конкретного варианта. Функция оказывает видимый эффект только тогда, когда используемый шрифт действительно содержит её — если шрифт не поддерживает функцию, объявление молча игнорируется.
Когда использовать (и когда не стоит)
font-feature-settings — это запасной вариант. Для распространённых нужд предпочтительнее использовать высокоуровневое сокращение font-variant и его подсвойства (font-variant-caps, font-variant-numeric, font-variant-ligatures, …). Они проще читаются, корректно наследуются и элегантно деградируют:
/* Preferred — high-level and readable */
font-variant-caps: small-caps;
/* Low-level equivalent — only when the font has no friendlier path */
font-feature-settings: "smcp";Обращайтесь к font-feature-settings только тогда, когда вам нужна функция, для которой нет выделенного ключевого слова font-variant — например, специфический стилистический набор шрифта ("ss01") или дискреционная функция, предоставляемая шрифтом по тегу.
Важная особенность: font-feature-settings работает по принципу всё или ничего. Поскольку весь список заменяет любое унаследованное значение, повторное объявление свойства на дочернем элементе сбрасывает все функции, установленные на родителе. Держите все нужные теги активными в одном объявлении, а не распределяйте их по разным правилам.
Распространённые теги функций OpenType
| Тег | Функция | Типичное применение |
|---|---|---|
smcp | Малые прописные | Отображать строчные буквы в виде малых прописных. |
c2sc | Прописные в малые прописные | Также преобразовывать заглавные буквы в малые прописные. |
liga | Стандартные лигатуры | Объединять пары букв, например fi, fl (включено по умолчанию; установите 0 для отключения). |
dlig | Дискреционные лигатуры | Декоративные лигатуры, например ct, st. |
onum | Старостильные цифры | Цифры с выносными элементами, органично вписывающиеся в основной текст. |
lnum | Заглавные цифры | Цифры одинаковой высоты, выровненные по высоте заглавных букв. |
tnum | Табличные цифры | Цифры фиксированной ширины для числовых колонок. |
frac | Дроби | Форматировать 1/2 как типографскую дробь. |
kern | Кернинг | Регулировать интервал между конкретными парами букв. |
swsh | Свэши | Декоративные завитки на глифах. |
Поддержка браузерами отличная в современных браузерах, однако для старых движков вы всё ещё можете встретить версии этого свойства с префиксами -webkit-, -moz- и -ms-.
| Начальное значение | normal |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.fontFeatureSettings = "normal"; |
Синтаксис
Синтаксис CSS-свойства font-feature-settings
font-feature-settings: normal | <feature-tag-value># | initial | inherit;Пример свойства font-feature-settings:
Пример CSS-свойства font-feature-settings со значением smcp
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
font-family: sans-serif;
}
h3 {
font-feature-settings: "smcp" 1;
}
</style>
</head>
<body>
<h2>Font-feature-settings example</h2>
<h3>The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.</h3>
</body>
</html>Пример с несколькими функциями
Вы можете включить сразу несколько функций с помощью списка через запятую. Здесь мы включаем старостильные цифры и отключаем стандартные лигатуры на одном элементе:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-feature-settings: "onum" 1, "liga" 0;
}
</style>
</head>
<body>
<p>Order 1234567890 ships in office. </p>
</body>
</html>Обратите внимание, что цифры изменятся только в том случае, если выбранный шрифт содержит старостильные цифры. Если функция отсутствует в шрифте, соответствующая часть объявления не оказывает никакого эффекта.
Значения
| Значение | Описание |
|---|---|
| normal | Это значение по умолчанию данного свойства. |
<feature-tag-value> | При отображении текста список значений тегов функций OpenType передаётся в механизм компоновки текста для включения или отключения возможностей шрифта. |
| initial | Устанавливает для свойства его значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
- font-variant — высокоуровневое сокращение, которое следует выбирать в первую очередь для малых прописных, лигатур и числовых цифр.
- font-family — выбор шрифта, который действительно содержит нужные вам функции OpenType.
- text-transform — изменяет регистр самих символов, в отличие от малых прописных, которые меняют лишь их внешний вид.
- letter-spacing — регулирует интервал между символами на уровне компоновки, а не через кернинг шрифта.