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.

автор: Svitlana

правити

@annotation

Цей блок працює зі значенням annotation() властивості font-variant-alternates.

автор: Svitlana

правити

@ornaments

Цей блок працює зі значенням ornaments() властивості font-variant-alternates.

автор: Svitlana

правити

@stylistic​

Цей блок працює зі значенням stylistic() властивості font-variant-alternates.

автор: Svitlana

правити

@styleset​

Цей блок працює зі значенням styleset() властивості font-variant-alternates.

автор: Svitlana

правити

@character-variant​

Цей блок працює зі значенням character-variant() властивості font-variant-alternates.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
font-feature-values	Не підтримується	34.0	9.1	Не підтримується	Не підтримується	Не підтримується

Підтримка: мобільні переглядачі

Переглядач
font-feature-values	Не підтримується	34.0	9.3

Приклади

+ запропонувати свій приклад у пісочниці

<p>Звичайне накреслення тексту</p>
<p class="fancy">З увімкненим styleset(nice)</p>

@font-feature-values "Font Name" {
    @styleset {
        nice: 4;
    }
}

p {
    font-family: "Font Name", serif;
}

.fancy {
    font-variant-alternates: styleset(nice);
}