css.in.ua
Підтримати

CSS function stylistic()

Опис

Функція stylistic() у CSS є потужним інструментом, що надає можливість використовувати стилістичні альтернативи для окремих символів у тексті. Вона є частиною набору властивостей для управління шрифтами і може застосовуватися для створення унікальних візуальних ефектів. Параметром цієї функції є назва, специфічна для шрифту, яка відповідає числовому значенню. Ця назва відповідає значенню salt у специфікації OpenType, наприклад, salt 2.

Ось як можна використовувати функцію stylistic() у практичному застосуванні:

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

У цьому прикладі, user-defined-ident є значенням, яке визначається користувачем і відповідає конкретній стилістичній альтернативі. Воно пов'язується з числовим індексом, визначеним у @font-feature-values at-rule для відповідного шрифту. Таке використання дозволяє застосовувати відповідну стилістичну альтернативу до вибраних символів у тексті.

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

Нотатка:

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

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

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

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

Синтаксис

stylistic(<feature-value-name>);
<feature-value-name>

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

Переглядачі

Переглядач

111

34

16.2

97

111
Переглядач

111

111

34

16.2

Мобільних переглядачів ще не додано.

Приклади


У цьому прикладі, salt відповідає числовому індексу, який визначає стилістичну альтернативу. Вона буде застосована до символів у вибраних елементах p, змінюючи їх зовнішній вигляд відповідно до визначених альтернатив шрифту.

@font-feature-values Custom Font {
    @stylistic {
        salt: 1;
    }
}

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

p.variant {
    font-variant-alternates: stylistic(salt);
}

Документи

Зв'язок