css властивість font-variant-position
Властивість font-variant-position використовується для вводу індексів гліфів.
Однією з розширених функцій шрифтів OpenType є підтримка професійно розроблених символів підкреслення та надписів. Вони розроблені таким чином, щоб бути візуально сумісними з повнорозмірними фігурами з точки зору ваги та пропорцій. Ці гліфи призначені для викладання на тому ж базовому рівні, що і стандартні гліфи, без зміни розміру або перестановки базової лінії.
Властивість font-variant-position дозволяє нам скористатися цими правильними індексами та надписів.
Без належних гліфів, браузер мусить брати нормальний гліф, змінювати розмір і його базову лінію. Зазвичай це не дає найоптимальніший результат. Гліф часто виглядає трохи непропорційно, і його переміщення може вплинути на висоту базової лінії. Професійно розроблені гліфи допомагають подолати ці проблеми.
Деякі шрифти мають лише базову підтримку цифр, а інші містять підкреслення та надрядкові гліфи для повного набору букв, цифр та пунктуації. Якщо якийсь варіант гліфа не доступний, браузер буде імітувати гліфи для всіх символів (так само, як це було б, якщо ця функція не була застосована або доступна). Це запобігає суміші правильних варіантів гліфів і синтезованих.
автор: Svitlana
Синтаксис
font-variant-position: normal | sub | superВластивість font-variant-position може отримувати 3 значень:
-
normal -
Жодна з перерахованих нижче функцій не ввімкнена.
автор: Svitlana -
sub -
Вмикає відображення нижніх індексів.
автор: Svitlana -
super -
Вмикає відображення верхніх індексів.
автор: Svitlana
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.fontVariantPosition |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 117 | 34 | 9.1 | 103 | 117 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 117 | 117 | 34 | 9.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Індекси й степені гліфами самого шрифту — замість зменшених і зсунутих літер, як у <sub>/<sup>. Якщо шрифт таких гліфів не має, браузер може синтезувати їх або показати звичайні.
HTML
<p>H<span class="sub">2</span>O — індекс через font-variant-position: sub</p>
<p>mc<span class="sup">2</span> — степінь через font-variant-position: super</p>CSS
.sub {
font-variant-position: sub;
}
.sup {
font-variant-position: super;
}Значення у дії
Приклад використання
Коментарі
Коментарів ще немає — будьте першим!