stylistic() в CSS — стилістична альтернатива літер шрифту

Опис

Функція 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 для даного шрифту.

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

Нотатка

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

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

Нотатка

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

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

Нотатка

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

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

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

Синтаксис

stylistic(<feature-value-name>);

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

<feature-value-name>

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

<p>Звичайне накреслення: a g y R Q</p>
<p class="variant">Зі stylistic(alt): a g y R Q</p>

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

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

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

<p class="head">DejaVu Sans, той самий текст. У другому рядку stylistic(alt)
    вмикає одноповерхову «ɑ» — порівняйте літеру «a»:</p>
<p class="s dv">alphabet · abracadabra · casa</p>
<p class="s dv salt">alphabet · abracadabra · casa</p>
<p class="cap">рядок 1 — без нічого, рядок 2 — font-variant-alternates: stylistic(alt)</p>

<p class="head">Те саме напряму, чотирилітерним кодом ознаки — результат однаковий:</p>
<p class="s dv fs">alphabet · abracadabra · casa</p>
<p class="cap">font-feature-settings: "salt" 1</p>

<p class="head">⚠️ Невизначений ідентифікатор — оголошення дійсне, ефекту немає:</p>
<p class="s dv nodef">alphabet · abracadabra · casa</p>
<p class="cap">stylistic(nema-takogo) — жодної помилки й жодної зміни</p>

<p class="head">⚠️ Значення прив'язані до РОДИНИ: оголошені для «DejaVu Sans»,
    вони не діють на «DejaVu Serif»:</p>
<p class="s ds">alphabet · abracadabra · casa</p>
<p class="s ds salt">alphabet · abracadabra · casa</p>
<p class="cap">обидва рядки — DejaVu Serif, другий зі stylistic(alt)</p>

<p class="head">А це працює в будь-якій системі: @supports показує, які записи
    браузер приймає, а які відкидає:</p>
<ul class="check">
    <li class="v1">stylistic(alt)</li>
    <li class="v2">stylistic(2)</li>
    <li class="v3">stylistic()</li>
    <li class="v4">stylistic(alt, other)</li>
    <li class="v5">styleset(one, two)</li>
    <li class="v6">stylistic(alt) styleset(one) swash(fancy)</li>
</ul>

@font-feature-values "DejaVu Sans" {
    @stylistic { alt: 1; }
}

.head {
    margin: 22px 0 8px;
    max-width: 620px;
    color: #5a6472;
    font-size: .9em;
}

.cap {
    margin: 4px 0 0;
    color: #5a6472;
    font: 12px/1.4 ui-monospace, monospace;
}

.s {
    margin: 0;
    padding: 6px 10px;
    background: #f6f9ff;
    border-left: 4px solid #b9c6d8;
    font-size: 30px;
}

.dv { font-family: "DejaVu Sans", sans-serif; }
.ds { font-family: "DejaVu Serif", serif; }

.salt { font-variant-alternates: stylistic(alt); border-left-color: #3a9a4f; }
.fs { font-feature-settings: "salt" 1; border-left-color: #3a9a4f; }
.nodef { font-variant-alternates: stylistic(nema-takogo); border-left-color: #e08a1e; }

.check {
    margin: 0;
    padding-left: 22px;
    color: #333;
    font: 14px/2 ui-monospace, monospace;
}

.check li::after {
    content: " — відкидається";
    color: #d64545;
    font-weight: 700;
}

@supports (font-variant-alternates: stylistic(alt)) {
    .check .v1::after { content: " — приймається"; color: #3a9a4f; }
}

@supports (font-variant-alternates: stylistic(2)) {
    .check .v2::after { content: " — приймається"; color: #3a9a4f; }
}

@supports (font-variant-alternates: stylistic()) {
    .check .v3::after { content: " — приймається"; color: #3a9a4f; }
}

@supports (font-variant-alternates: stylistic(alt, other)) {
    .check .v4::after { content: " — приймається"; color: #3a9a4f; }
}

@supports (font-variant-alternates: styleset(one, two)) {
    .check .v5::after { content: " — приймається"; color: #3a9a4f; }
}

@supports (font-variant-alternates: stylistic(alt) styleset(one) swash(fancy)) {
    .check .v6::after { content: " — приймається"; color: #3a9a4f; }
}