2.28. CSS3-шрифты

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

Чтобы позволить авторам контролировать эти возможности шрифта, свойство font-variant было расширено для CSS3. Теперь оно функционирует как сокращение для набора свойств, которые обеспечивают контроль над стилистическими функциями шрифта.

Рис. 1. Один символ, множество вариаций глифа

Расширенные возможности свойств шрифтов

1. Кернинг: свойство font-kerning

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

IE:
Edge:
Firefox: 34
Chrome: 33, 29 -webkit-
Safari: 9.1, 7 -webkit-
Opera: 20, 16 -webkit-
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 71
Samsung Internet: 4

Кернинг — это контекстная настройка межглифевого интервала. Свойство font-kerning позволяет избирательно изменять интервал между символами в зависимости от их формы. Для шрифтов, которые не содержат данных кернинга, это свойство не будет иметь видимого эффекта.

Свойство наследуется.

font-kerning
Значения:
auto Указывает, что кернинг применяется по усмотрению пользовательского агента на основе ряда факторов: размера текста, скриптов или других факторов, влияющих на скорость обработки текста. Значение по умолчанию.
normal Указывает, что кернинг применяется.
none Указывает, что кернинг не применяется.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-kerning: auto;
font-kerning: normal;
font-kerning: none;
font-kerning: inherit;
font-kerning: initial;
Рис. 2. Соседние буквы без кернинга и с кернингом

2. Лигатуры: свойство font-variant-ligatures

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

IE: 10
Edge: 12
Firefox: 34, 15 -moz-
Chrome: 48, 21 -webkit-
Safari: 9.1
Opera: 35, 15 -webkit-
iOS Safari: 9.3
UC Browser for Android: 11.8 -webkit-
Chrome for Android: 71
Samsung Internet: 5, 4 -webkit-

Лигатуры и контекстные формы — это способы объединения глифов в один знак-глиф для создания более гармоничных форм. Свойство font-variant-ligatures определяет, какие лигатуры и контекстные формы используются в текстовом содержимом элементов.

Свойство наследуется.

font-variant-ligatures
Значения:
normal Указывает, что общие функции по умолчанию включены. Для шрифтов OpenType основные лигатуры и контекстные формы включены по умолчанию, а дискреционные и исторические лигатуры — нет. Значение по умолчанию.
none Указывает, что все типы лигатур и контекстных форм, охватываемых этим свойством, явно отключены. В ситуациях, когда лигатуры не считаются необходимыми, это может повысить скорость рендеринга текста.
common-ligatures Включает отображение общих лигатур (функции OpenType: liga, clig). Для шрифтов OpenType общие лигатуры включены по умолчанию.
no-common-ligatures Отключить отображение общих лигатур (функции OpenType: liga, clig).
discretionary-ligatures Включает отображение дискреционных лигатур (функция OpenType: dlig). Какие лигатуры являются дискреционными или необязательными, определяется конструктором типов, поэтому авторам нужно будет обратиться к документации данного шрифта, чтобы понять, какие лигатуры считаются дискреционными.
no-discretionary-ligatures Отключает отображение дискреционных лигатур (функция OpenType: dlig).
historical-ligatures Включает отображение исторических лигатур (функция OpenType: hlig).
no-historical-ligatures Отключает отображение исторических лигатур (функция OpenType: hlig).
contextual Включает отображение контекстных альтернатив (функция OpenType: calt). Хотя эта функция не является строго лигатурой, как и лигатуры, она обычно используется для согласования форм глифов с окружающим контекстом. Для шрифтов OpenType эта функция включена по умолчанию.
no-contextual Отключает отображение контекстных альтернатив (функция OpenType: calt).
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures;           
font-variant-ligatures: no-common-ligatures;       
font-variant-ligatures: discretionary-ligatures;   
font-variant-ligatures: no-discretionary-ligatures; 
font-variant-ligatures: historical-ligatures;       
font-variant-ligatures: no-historical-ligatures;   
font-variant-ligatures: contextual;               
font-variant-ligatures: no-contextual;             
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
Рис. 3. Варианты лигатур

3. Подстрочные и надстрочные формы: свойство font-variant-position

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

IE:
Edge:
Firefox: 34
Chrome:
Safari:
Opera:
iOS Safari:
UC Browser for Android:
Chrome for Android:
Samsung Internet:

Свойство font-variant-position используется для включения типографских и надстрочных глифов. Это альтернативные глифы, разработанные в том же блоке, что и глифы по умолчанию, и предназначенные для размещения на той же базовой линии, что и глифы по умолчанию, без изменения размера или изменения положения базовой линии. Они разработаны таким образом, чтобы соответствовать окружающему тексту и быть более читаемыми, не влияя на высоту строки.

Свойство наследуется.

Рис. 4. Подстрочные глифы (вверху) против типичных синтезированных индексов (внизу)
font-variant-position
Значения:
normal Означает отсутствие включенных функций. Значение по умолчанию.
sub Включает отображение вариантов нижнего индекса (функция OpenType: subs).
super Включает отображение надстрочных вариантов (функция OpenType: sups).
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;
font-variant-position: inherit;
font-variant-position: initial;
Рис. 5. Верхний индекс альтернативного глифа (слева), синтезированный верхний индекс глифов (в середине) и неправильная смесь двух символов (справа)

4. Преобразование в заглавные буквы: свойство font-variant-caps

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

IE:
Edge:
Firefox: 34
Chrome: 52
Safari:
Opera: 39
iOS Safari:
UC Browser for Android: ?
Chrome for Android: 52
Samsung Internet: 6

Свойство font-option-caps контролирует использование альтернативных глифов для заглавных букв.

Свойство наследуется.

font-variant-caps
Значения:
normal Означает отсутствие функций преобразования. Значение по умолчанию.
small-caps Включает отображение маленьких заглавных букв (функция OpenType: smcp). Глифы маленьких заглавных букв обычно используют форму заглавных букв, но уменьшены до размера строчных букв.
all-small-caps Позволяет отображать заглавные буквы как заглавными, так и строчными буквами (функции OpenType: c2sc, smcp). При использовании обычных маленьких заглавных букв любой заглавный символ отображается в полном верхнем регистре, а строчные — меньше. Однако при использовании этого ключевого слова эти заглавные буквы отображаются с меньшим размером.
petite-caps Включает отображение миниатюрных заглавных букв (функция OpenType: pcap) Если шрифт не поддерживает миниатюрные заглавные буквы, свойство ведет себя так, как будто вместо него было задано small-caps.
all-petite-caps Позволяет отображать маленькие заглавные буквы как в верхнем, так и в нижнем регистре (функции OpenType: c2pc, pcap). В противном случае ведет себя так, как будто вместо него было задано all-small-caps.
unicase Включает отображение сочетания маленьких заглавных букв для прописных букв с обычными строчными (функция OpenType: unic).
titling-caps Предназначен для заголовков и названий в тексте (функция OpenType: titl). Включает отображение специальных заглавных букв для заголовков, с менее жирным начертанием, чем у обычных заголовков. Если шрифт не поддерживает эту функцию, ключевое слово не имеет видимых действий.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;
font-variant-caps: inherit;
font-variant-caps: initial;

Доступность этих глифов зависит от того, определена ли данная функция в списке возможностей шрифта. Для обратной совместимости с CSS 2.1, если указаны small-caps или all-small-caps, но глифы small-caps недоступны для данного шрифта, браузеры должны имитировать шрифт small-caps, например, взяв обычный шрифт и заменив глифы для строчных букв масштабированными версиями глифов для заглавных букв по аналогии с text-transform: uppercase (заменить глифы как для заглавных, так и для строчных букв в случае all-small-caps).

Если для шрифта, который не поддерживает эти функции, указано petite-caps или all-petite-caps, свойство ведет себя так, как если бы small-caps или all-small-caps были указаны соответственно.

Если для шрифта, который не поддерживает эту функцию, указано unicase, свойство ведет себя так, как будто small-caps применлся только к заглавным буквам в нижнем регистре.

Рис. 6. text-transform: uppercase и font-variant-caps: small-caps

5. Форматирование цифр: свойство font-variant-numeric

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

IE:
Edge:
Firefox: 34
Chrome: 52
Safari: 9.1
Opera: 39
iOS Safari: 9.3
UC Browser for Android: 11.8
Chrome for Android: 71
Samsung Internet: 6.2

Свойство font-variant-numeric контролирует использование альтернативных глифов для чисел, дробей и порядковых маркеров.

Свойство наследуется.

font-variant-numeric
Значения:
normal Функции преобразования не применяются. Значение по умолчанию.
lining-nums Выравнивает все цифры по базовой линии текста (функция OpenType: lnum).
oldstyle-nums Отображает некоторые знаки (3, 4, 7, 9) таким образом, чтобы они уходили нижним краем под базовую линию текста (функция OpenType: onum).
proportional-nums Включает отображение пропорциональных чисел (функция OpenType: pnum).
tabular-nums Включает отображение табличных чисел — одинаковой ширины, которые легко выравниваются, как в таблицах (функция OpenType: tnum).
diagonal-fractions Включает символы дробей, в которых числитель и знаменатель уменьшены и разделены косой чертой (функция OpenType: frac).
stacked-fractions Включает символы дробей, где числитель и знаменатель уменьшены, поставлены друг над другом и разделены горизонтальной чертой (функция OpenType: afrc).
ordinal Включает отображение буквенных форм, используемых с порядковыми номерами — специальные глифы для порядковых числительных, например, 1st, 2nd, 3rd, 4th в английском (функция OpenType: ordn).
slashed-zero Включает отображений нулей перечеркнутыми косой линией (функция OpenType: zero).
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-variant-numeric: normal;
font-variant-numeric: lining-nums;        
font-variant-numeric: oldstyle-nums;       
font-variant-numeric: proportional-nums;   
font-variant-numeric: tabular-nums;        
font-variant-numeric: diagonal-fractions;  
font-variant-numeric: stacked-fractions;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;   
font-variant-numeric: oldstyle-nums stacked-fractions;
font-variant-numeric: inherit;
font-variant-numeric: initial;
Рис. 7. Примеры значений свойства font-variant-numeric

6. Визуализация восточноазиатского текста: свойство font-variant-east-asian

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

IE:
Edge:
Firefox: 34
Chrome: 63
Safari:
Opera: 50
iOS Safari:
UC Browser for Android: ?
Chrome for Android: 63
Samsung Internet:

Свойство font-variant-east-asian позволяет контролировать замену и размер глифов в восточноазиатском тексте.

Свойство наследуется.

font-variant-east-asian
Значения:
normal Функции преобразования не применяются. Значение по умолчанию.
jis78 Включает рендеринг форм JIS78 (функция OpenType: jp78).
jis83 Включает рендеринг форм JIS83 (функция OpenType: jp83).
jis90 Включает рендеринг форм JIS90 (функция OpenType: jp90).
jis04 Включает рендеринг форм JIS2004 (функция OpenType: jp04).
simplified Включает рендеринг упрощенных форм (функция OpenType: smpl).
traditional Включает рендеринг традиционных форм (функция OpenType: trad).
full-width Включает рендеринг символов одинаковой ширины, квадратной формы (функция OpenType: fwid).
proportional-width Включает рендеринг символов разной ширины (функция OpenType: pwid).
ruby Включает отображение глифов вариантов ruby (функция OpenType: ruby).
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-variant-east-asian: normal;
font-variant-east-asian: jis78;            
font-variant-east-asian: jis83;              
font-variant-east-asian: jis90;              
font-variant-east-asian: jis04;             
font-variant-east-asian: simplified;        
font-variant-east-asian: traditional;       
font-variant-east-asian: full-width;         
font-variant-east-asian: proportional-width; 
font-variant-east-asian: ruby;
font-variant-east-asian: ruby full-width jis83;
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
Рис. 8. Пример вывода текста с font-variant-east-asian: jis78

7. Общее сокращение для рендеринга шрифтов: свойство font-variant

font-variant
Значения:
normal Сбрасывает все подсвойства вариантов шрифтов к их начальному значению. Значение по умолчанию.
none Устанавливает для font-variant-ligatures значение none и сбрасывает все остальные свойства шрифта на значение по умолчанию.
значения отдельных свойств вариантов шрифта Определяет ключевые слова и функции, относящиеся к конкретному свойству.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Свойство font-variant является сокращением для всех подсвойств вариантов шрифта. Не сбрасывает значения font-feature-settings.

Синтаксис

font-variant: normal;
font-variant: none;
font-variant: small-caps;
font-variant: common-ligatures small-caps;
font-variant: inherit;
font-variant: initial;

8. Низкоуровневое управление настройками шрифтов: свойство font-feature-settings

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

IE: 10
Edge: 12
Firefox: 34, 15 -moz-
Chrome: 48, 21 -webkit-
Safari: 9.1
Opera: 35, 15 -webkit-
iOS Safari: 9.3
UC Browser for Android: 11.8 -webkit-
Chrome for Android: 71
Samsung Internet: 5, 4 -webkit-

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

Свойство наследуется.

font-feature-settings
Значения:
normal Значение означает, что из-за этого свойства не происходит никаких изменений в выборе или позиционировании глифа. Значение по умолчанию.
строка и/или целое число/on/off Строка представляет собой тег OpenType. Целое число, если присутствует, указывает индекс, используемый для выбора символа. Значение должно быть 0 или больше. Значение 0 указывает, что функция отключена. Для логических объектов значение 1 включает функцию. Для объектов, не являющихся логическими, значение 1 или больше включает объект и указывает индекс выбора объекта. Значение on является синонимом 1, а off является синонимом 0. Если значение опущено, принимается значение 1.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-feature-settings: normal;
font-feature-settings: "smcp", "swsh" 2;
font-feature-settings: "dlig" 1;       
font-feature-settings: "smcp" on;    
font-feature-settings: "c2sc";         
font-feature-settings: "liga" off;    
font-feature-settings: "tnum", "hist"; 
font-feature-settings: "tnum" "hist";  
font-feature-settings: "PKRN";
font-feature-settings: inherit;
font-feature-settings: initial;

По материалам CSS Fonts Module Level 3

Поделиться: