Властивість font-size-adjust в CSS дозволяє розробникам вказувати font-size на основі висоти маленьких, а не великих літер. Це може значно покращити чіткість тексту.
У цій статті ви дізнаєтесь про важливість властивості font-size-adjust і навчитесь застосовувати її у своїх проектах.
Важливість font-size-adjust
font-size встановлює розмір для всіх font-family, які ви хочете використати на сайті. У більшості випадків його встановлюють таким чином, щоб добре виглядав основний шрифт. Проблема виникає тоді, коли основний шрифт недоступний і браузер рендерить текст, використовуючи один з резервних шрифтів, вказаних у CSS файлі.
Наприклад, є таке CSS правило:
body {
font-family: 'Lato', Verdana, sans-serif;
}
Якщо «Lato», який ваш браузер завантажує з Google Fonts, недоступний, буде використано наступний резервний шрифт, у цьому випадку «Verdana». Однак, цілком імовірно, що значення font-size було вибрано швидше для «Lato», ніж для «Verdana».
Що таке аспектне значення веб-шрифту
Видимий розмір шрифту, а також його чіткість, можуть значно коливатись для сталого значення font-size. Особливо це стосується латинки, де відрізняються літери верхнього і нижнього регістру. У таких випадках, співвідношення висоти малих букв до висоти їх великих еквівалентів є важливим фактором у визначенні чіткості шрифту. Це співвідношення зазвичай називають аспектним значенням шрифту.
Як я вже згадував раніше, після встановлення значення font-size, воно буде залишатись постійним для всього сімейства шрифтів. Однак, це може вплинути на чіткість резервного шрифту, якщо його аспектне значення відрізняється від відповідного значення основного шрифту.
Роль властивості font-size-adjust є важливою в таких ситуаціях, оскільки вона дозволяє вам встановити x-висоту (висота від базової лінії шрифту до лінії малих букв) всіх шрифтів до одного значення, тим самим покращуючи їхню читабельність.
Вибір правильного значення для font-size-adjust
Тепер, коли ви знаєте про важливість використання властивості font-size-adjust, настав час дізнатись, як використовувати її на своєму сайті. У цієї властивості такий синтаксис:
font-size-adjust: none | <number>
Початковим значенням для font-size-adjust є none. Воно означає, що не буде здійснено жодного вирівнювання до значень font-size інших font-family.
Також, ви можете встановити значення властивості font-size-adjust числом. Це число використовується для обчислення x-висоти всіх шрифтів на веб-сторінці до одного значення. А х-висота дорівнює заданому числу, помноженому на font-size. Це може трохи покращити читабельність шрифтів при невеликих розмірах. Ось приклад використання властивості font-size-adjust:
font-size: 20px;
font-size-adjust: 0.6;
Тепер х-висота для всіх шрифтів буде 20px * 0.6 = 12px. Фактичний розмір даного шрифту може бути змінено таким чином, що х-висота завжди залишатиметься у розмірі 12px. Новий, вирівняний розмір даного шрифту можна обчислити, використовуючи цю формулу:
c = ( a / a' ) s.
Тут, c – скоректований розмір шрифту для використання, s – це задане значення розміру шрифту, а – аспектне значення, вказане властивістю font-size-adjust, а' – аспектне значення для шрифту, який потрібно вирівняти.
Властивості font-size-adjust не можна задати негативне значення. Значення 0, фактично приховає текст. У старих браузерах, таких як Firefox 40, значення 0 є еквівалентним значенню none.
У більшості випадків розробники, як правило, експериментують з кількома значеннями розміру шрифту, щоб побачити, яке найкраще підходить для обраного шрифту. Це означає, що в ідеалі вони хотіли б, щоб х-висота усіх резервних шрифтів дорівнювала х-висоті основного шрифту. Іншими словами, оптимальним значення для font-size-adjust є аспектне значення основного шрифту.
Як дізнатись аспектне значення шрифту
Щоб визначити правильне аспектне значення шрифту, орієнтуйтесь на те, що розмір вирівняного шрифту для нього повинен дорівнювати розміру шрифту, який вказали ви. Це означає, що а, з попередньої рівності, повинно дорівнювати а'.
Першим кроком для розрахунку аспектного значення, є створення двох <span> елементів. Обидва елементи будуть містити одну літеру та межу навколо кожної літери (літери повинні бути однаковими для обох елементів <span>, тому що нам потрібно буде порівняти їх між собою). Обидва елементи матимуть однакове значення для властивості font-size. Проте, лише для одного буде встановлено font-size-adjust. Коли значення властивості font-size-adjust дорівнюватиме аспектному значенню даного шрифту, обидві літери в кожному із <span> елементів будуть однакового розміру.
У наступній демонстрації я створив межу навколо букв «t» і «b» і застосував різні величини font-size-adjust для кожної пари.
Ось відповідний фрагмент:
.adjusted-a {
font-size-adjust: 0.4;
}
.adjusted-b {
font-size-adjust: 0.495;
}
.adjusted-c {
font-size-adjust: 0.6;
}
Як ви можете бачити в демо нижче, більше значення font-size-adjust робить літери більшими, а менше значення робить літери меншими. Коли font-size-adjust дорівнює аспектному значенню, пари однакового розміру.
Використання font-size-adjust на веб-сайтах
У наведеній нижче демонстрації використовується значення font-size-adjust, обчислене в попередній демонстрації CodePen для шрифту «Lato», щоб змінити розмір шрифту «Verdana», який працює як резервний. Кнопка включає і виключає вирівнювання, щоб ви змогли побачити різницю самостійно.
Ефект помітніший, коли ви працюєте з більшою кількістю тексту. Проте, наведеного вище прикладу достатньо, щоб дати вам уявлення про корисність цієї властивості.
Підтримка браузерів
Зараз, лише Firefox підтримує font-size-adjust за замовчуванням. Починаючи з версій 43 і 30, Chrome і Opera відповідно підтримують цю властивість під прапорцем «Експериментальні функції веб-платформи», який може бути включений у chrome://flags. Edge і Safari взагалі не підтримують font-size-adjust.
Якщо ви вирішите скористатись цією властивістю, погана підтримка браузерів не повинна бути проблемою взагалі. Ця властивість була розроблена з урахуванням зворотної сумісності. Браузери без підтримки відображатимуть текст звичайно, в той час як інші вирівнюватимуть розмір шрифту на основі значення font-size-adjust.
Ще немає коментарів