css властивість font-variant-position

Властивість font-variant-position використовується для вводу індексів гліфів.

Однією з розширених функцій шрифтів OpenType є підтримка професійно розроблених символів підкреслення та надписів. Вони розроблені таким чином, щоб бути візуально сумісними з повнорозмірними фігурами з точки зору ваги та пропорцій. Ці гліфи призначені для викладання на тому ж базовому рівні, що і стандартні гліфи, без зміни розміру або перестановки базової лінії. Властивість font-variant-position дозволяє нам скористатися цими правильними індексами та надписів.

Без належних гліфів, браузер мусить брати нормальний гліф, змінювати розмір і його базову лінію. Зазвичай це не дає найоптимальніший результат. Гліф часто виглядає трохи непропорційно, і його переміщення може вплинути на висоту базової лінії. Професійно розроблені гліфи допомагають подолати ці проблеми.

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

правити

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

Синтаксис

font-variant-position: normal | sub | super

Властивість font-variant-position може отримувати 3 значень:

normal

Жодна з перерахованих нижче функцій не ввімкнена.

автор: Svitlana

правити

sub

Вмикає відображення нижніх індексів.

автор: Svitlana

правити

super

Вмикає відображення верхніх індексів.

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
font-variant-position	Не підтримуться	34.0	Не підтримуться	Не підтримуться	Не підтримуться	Не підтримуться

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

Переглядач
font-variant-position	Не підтримуться	34.0	Не підтримуться

Приклади

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

<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>

.sub {
    font-variant-position: sub;
}

.sup {
    font-variant-position: super;
}