CSS function annotation

Опис

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

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

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

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

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

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

правити

Нотатка

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

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

Нотатка

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

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

Нотатка

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

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

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

Синтаксис

annotation(<feature-value-name>)

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

<feature-value-name>

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

<p>Звичайні цифри: 0123456789</p>
<p class="variant">З annotation(salt): 0123456789</p>

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

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

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