CSS function ornaments

Опис

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

Один із практичних прикладів використання функції ornaments() можна побачити у наступному CSS-виразі:

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

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

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

правити

Нотатка

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

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

Нотатка

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

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

Нотатка

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

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

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

Синтаксис

ornaments(<feature-value-name>);

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

<feature-value-name>

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

<p>Звичайний гліф-маркер: ❧</p>
<p class="variant">З ornaments(fleurons): ❧</p>

@font-feature-values "Custom Font" {
    @ornaments {
        fleurons: 1;
    }
}

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

p.variant {
    font-variant-alternates: ornaments(fleurons);
}