css властивість font-feature-values
Значення функції @font-feature-values
дозволяє використовувати загальну назву в властивості font-variant-alternates
для функцій, активізованих по-різному в OpenType. Це може спростити CSS при використанні декількох шрифтів.
@font-feature-values
надає іменоване значення властивостей font-variant-alternates
при активації специфічних для даного шрифту функції. Шрифт може містити декілька альтернативних гліфів, окрім стандартного гліфа для певного символу. Сюди можуть входити грізні гліфи, альтернативні форми анотацій, стилістичні альтернативи тощо. І шрифт може містити кілька символів у кожній з цих категорій, для кожного з яких призначений індекс. Наприклад, шрифт може містити два різноманітних гліфи, один має індекс 1, а інший 2. @font-feature-values
дозволяє вам створити ім'я для цих індексів функцій, щоб ви могли використовувати його з для властивості font-variant-alternates
.@font-feature-values
складається зі списку сімейств шрифтів, за якими слідують блоки з окремими значеннями функції, які приймають форму @-rules
.
Наприклад:
@font-feature-values Barko Script {
@swash {
swishy: 1;
flowing: 2;
}
}
Щоб вказати, який з цих варіантів використовувати:
@font-feature-values Barko Script {
@swash {
swishy: 1;
flowing: 2;
}
}
h1 {
font-family: 'Barko Script';
}
h1:first-letter {
font-variant-alternates: swash(flowing); /* вибираємо другий варіант */
}
У цьому випадку ми вибираємо другий варіант (той, який ми назвали flowing
, що має індекс 2).
Можливі значення
Значення @font-feature-values
, називають "блоками значення об'єкта". Кожен з них приймає форму @-rule
і визначає набір іменованих значень для певної функції шрифту, коли використовується певний набір сімейств шрифтів.
Іншими словами, ці блоки дозволять посилатися між сімейством шрифтів, функцією шрифту, ідентифікатором клієнта та числове значення індексу. Значення числового індексу - це значення, визначене шрифтом для певної функції.
@font-feature-values
може містити будь-який з наступних блоків:
@swash
Цей блок працює зі значенням swash() властивості альтернатив font-variant-alternates
. Ви надаєте спеціальний ідентифікатор із відповідним значенням. Значення відповідає індексу, визначеному шрифтом для бажаного гліфа. Користувацький ідентифікатор може містити лише одне значення.
@swash {
someid: 1;
}
@annotation
Цей блок працює зі значенням annotation()
властивості font-variant-alternates
. Ви надаєте спеціальний ідентифікатор із відповідним значенням. Значення відповідає індексу, визначеному шрифтом для бажаного гліфа. Кожен користувацький ідентифікатор може містити лише одне значення.
@ornaments
Цей блок працює зі значенням ornaments()
властивості font-variant-alternates
. Ви надаєте спеціальний ідентифікатор із відповідним значенням. Значення відповідає індексу, визначеному шрифтом для бажаного гліфа. Кожен користувацький ідентифікатор може містити лише одне значення.
@stylistic
Цей блок працює зі значенням stylistic()
властивості font-variant-alternates
. Ви надаєте спеціальний ідентифікатор із відповідним значенням. Значення відповідає індексу, визначеному шрифтом для бажаного гліфа. Кожен користувацький ідентифікатор може містити лише одне значення.
@styleset
Цей блок працює зі значенням styleset()
властивості font-variant-alternates
. Ви надаєте спеціальний ідентифікатор із відповідним значенням. Значення відповідає індексу, визначеному шрифтом для бажаного гліфа.
Кілька значень вказують на налаштовування наборів стилів. Значення між 1 та 99 дозволяють функціям OpenType ss01 через ss99 (хоча стандарт OpenType офіційно визначає лише ss01 через ss20).
Немає обмежень для кількості значень, які ви можете надати користувацькому ідентифікатору.
@character-variant
Цей блок працює зі значенням character-variant()
властивості font-variant-alternates
. Ви надаєте спеціальний ідентифікатор із відповідним значенням. Значення відповідає індексу, визначеному шрифтом для бажаного гліфа.
Кожен користувацький ідентифікатор може містити до двох значень. Єдине значення від 1 до 99 вказує на активацію функції OpenType cv01 через cv99. Коли вказано два значення, перше значення вказує на використовувану функцію, а на другому - значення, яке було передано для цієї функції.
Синтаксис
@font-feature-values <family-name># {
<feature-value-block-list>
}
Властивість font-feature-values може отримувати 6 значень:
@swash
Цей блок працює зі значенням
swash()
властивостіfont-variant-alternates
.@annotation
Цей блок працює зі значенням
annotation()
властивостіfont-variant-alternates
.@ornaments
Цей блок працює зі значенням
ornaments()
властивостіfont-variant-alternates
.@stylistic
Цей блок працює зі значенням
stylistic()
властивостіfont-variant-alternates
.@styleset
Цей блок працює зі значенням
styleset()
властивостіfont-variant-alternates
.@character-variant
Цей блок працює зі значенням
character-variant()
властивостіfont-variant-alternates
.
Значення без задання: | |
---|---|
Наслідує: | Ні |
Анімується: | Ні |
JavaScript синтаксис: |
Переглядачі
Переглядач | ||||||
---|---|---|---|---|---|---|
font-feature-values | Не підтримується |
Не підтримується |
34.0 |
9.1 |
Не підтримується |
Не підтримується |
Переглядач | |||
---|---|---|---|
font-feature-values | Не підтримується |
34.0 |
9.3 |
Мобільних переглядачів ще не додано.
Приклади
Синтаксис
@font-feature-values Font Name {
@styleset {
nice: 4;
}
}