CSS function swash

Опис

swash() дозволяє застосовувати закруглені гліфи (або з'єднані форми символів) у тексті. Ця функція приймає назву, що відповідає числовому значенню. Назва відображає різні варіанти гліфів і визначає їх зовнішній вигляд. За допомогою функції swash() ви можете вказати, які альтернативи гліфів ви бажаєте використовувати для окремих символів у вашому тексті.

Один з способів використання цієї функції полягає у вказанні значення user-defined-ident у властивості font-variant-alternates. Наприклад:

p {
  font-variant-alternates: swash(user-defined-ident);
}

У цьому прикладі, user-defined-ident - це значення, яке ви, як користувач, визначаєте для відповідної закругленої альтернативи (swash). Це значення пов'язане з числовим індексом, визначеним у @font-feature-values at-rule для відповідного шрифту.

правити

Нотатка

Значення, передане до swash(), повинно бути визначено в @font-feature-values для даного шрифту.

автор: Bond правити

Нотатка

Не всі шрифти підтримують стилізовані варіанти. Перед використанням цієї функції важливо перевірити, чи підтримує шрифт цю можливість.

автор: Bond правити

Нотатка

Підтримка цієї функції може відрізнятися в різних браузерах.

автор: Bond правити

Нотатка

Функція swash() - це важливий інструмент для підвищення естетичності та варіативності вашого тексту. Вона дозволяє легко застосовувати закруглені та конектива гліфи, додаючи унікальний вигляд до вашого шрифту. Не соромтеся експериментувати з цією функцією, щоб створити власний неповторний стиль у ваших дизайнах.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

swash(<feature-value-name>);

Функція swash може отримувати єдине значення:

<feature-value-name>

Назва стилізованого варіанту, який був визначений в директиві @font-feature-values для даного шрифту.

автор: Bond

правити

Переглядачі

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

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

Переглядач
	111	34	16.2	97	111

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

Переглядач
	111	34	16.2

Приклади

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

<p>Звичайне накреслення: Quality Rare gift</p>
<p class="variant">Зі swash(fancy): Quality Rare gift</p>

@font-feature-values "Custom Font" {
    @swash {
        fancy: 1;
    }
}

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

p.variant {
    font-variant-alternates: swash(fancy);
}