Широка підтримка @ font-face в браузерах творить чудеса в веб-типографике, даючи нам можливість використовувати будь-які шрифти на наш розсуд. Але різноманітність доступних шрифтів це ще не вся типографіка. Існують і інші важливі речі, які довгий час не були реалізовані в інтернеті, такі як правильні переноси довгих слів, а також використання додаткових можливостей Opentype шрифтів - лігатур, кернинга, розчерків і інших.
У цій статті ми розглянемо деякі з таких нових можливостей.
Розділ можна було б назвати "рішення проблеми довгих слів, в тексті вирівняному по ширині", але це було б не менше жахливо, ніж сама проблема. Якщо коротко, то проблема полягає в тому, що ми до цих пір не можемо використовувати в інтернеті вирівнювання по ширині (text-align: justify), тому що це жахливо виглядає.
На щастя, зараз у нас з'явилися шляхи вирішення цієї проблеми. Кращим з них є властивість CSS hyphens. додає дефіси там, де це потрібно і що дає візуальне враження, що слова тривають на наступному рядку. За рахунок розбиття довгих слів ширина колонки заповнюється більш рівномірно, з меншою кількістю пропусків. Код виглядає так:
Існують і інші значення для hyphens: none відключить всі дефіси, включаючи проставлені вручну, а manual залишить тільки дефіси, проставлені вручну за допомогою ‐ (Звичайний дефіс, виводиться завжди) або (М'який дефіс, виводиться тільки при перенесенні - є спеціальні сервіси для розміщення в тексті м'яких переносів). Для того, щоб це властивість працювало у тесту повинен бути заданий атрибут lang. а в браузері мають бути інтегрований словник підтримки переносів. У дії це можна перевірити в демо в одному з підтримують цей функціонал браузерів.
Візуалізація тексту
Властивість text-rendering дає браузерних движку рендеринга інформацію про те, що він повинен оптимізувати при рендеринге. В наявності є таке значення:
- auto. залишає вибір на розсуд браузера. Оптимізуватися може швидкість, чіткість або геометрична точність. У браузерах WebKit / Blink за замовчуванням оптимізується швидкість, в Firefox - швидкість для шрифтів максимум 20 пікселів і чіткість для великих шрифтів.
- optimizeSpeed. браузер оптимізує швидкість, відключаючи зайві можливості типу кернинга і лігатур.
- optimizeLegibility - браузер оптимізує чіткість, реалізуючи все красивості, які доступні в шрифті.
- geometricPrecision - браузер оптимізує геометричну точність, це означає, що деякі аспекти шрифту, що не масштабовані лінійно, будуть масштабироваться більш гладко при різному зуме. У Firefox це значення обробляється ідентично optimizeLegibility.
Управління рендерингом шрифту є в Firefox, Chrome і Safari зі згаданими вище обмеженнями.
Налаштування можливостей шрифтів
font-feature-settings це чудове нове властивість, що дозволяє вам керувати використанням альтернативними гліфами, наявними всередині ваших файлів з шрифтами OTF (деякими з них), такими як лігатури і розчерки.
Як дізнатися які можливості шрифту доступні?
Гарне питання. І він досить складний, тому що опису шрифтів на подив погано передають таку інформацію. На щастя, нещодавно ця інформація стала доступна завдяки сервісів хостингу шрифтів типу Fontdeck.
Після того, як ви дізналися про наявні можливості шрифту, ви можете почати налаштовувати їх за допомогою властивості font-feature-settings. Його значення це список кодів, які представляють різні можливості шрифту, наприклад:
Firefox і IE11 вже не потребують Вендорний префіксах, але я їх залишив для тих, хто користується старими версіями браузерів. Браузери на основі Blink і WebKit потребують префіксах, також як і Internet Explorer 10.
Розглянемо окремі опції, доступні під час налаштування можливостей шрифтів.
Лігатури і дискретні лігатури
Це спеціально стилізовані поєднання певних літер, наприклад, "oo" або "th".
На цьому зображенні показаний шрифт Monarcha Book на Fontdeck з активованими дискретними лигатурами (dlig).
Цифри, дробу і порядкові числівники
Існують також окремі опції для зміни виду цифра в шрифтах самими різними способами. наприклад:
Я знову використовую шрифт Monarcha з Fontdeck, щоб перевірити можливі настройки.
Табличні цифри (tnum) і пропорційні (pnum), як правило, дуже схожі, також як і вироблений ефект від цих налаштувань. Табличні цифри оптимізовані для відображення в таблицях вони більш рівномірні, чіткі, з рівними відступами, а пропорційні - пропорційного розміру.
Цифри старого стилю (onum) виділяються меншою стандартизовані, багато хто з них не сидять на базовій лінії, у них різниться висота.
У наступних прикладах ви можете бачити оригінальне представлення цифр на першому зображенні, пропорційне (pnum) і табличний (tnum) на другому, а на третьому цифри старого стилю (onum).
У деяких шрифтах також є спеціальні підрядкові гліфи для для дробів - це активується налаштуванням frac. Ось приклад її дії:
Рядкові прописні (капітель)
Капітель це зменшені заголовні букви, які використовуються в якості малих, в CSS для цього є опція font-variant: small-caps:
Це зображення показує зменшені прописні букви (smcp) на вже звичному шрифті Monarcha Book з Fontdeck.
Кернинг це регулювання відстаней між окремими парами символів, що надає їм більшу натуральність і читаність. Це такі пари як "Wo", "Na" і більше незграбних символів. У деяких шрифтах є інформація про кернінг, і, відповідно, він може бути активований. Ось досить очевидний приклад:
Приклад зроблений з шрифтом Magneta Book Italic, доступним на Fontdeck.
Стильові набори та інші ефекти
І, нарешті, перейдемо до решти, самим різним ефектам. Ви знайдете шрифти з доступними в них різними написаниями букв, або з розчерками і формами букв, що з'являються лише в певному контексті.
- ss = стильової набір.
- swsh = стильової розчерк.
- cswh = контекстний розчерк.
- calt = контекстна альтернатива.
Існують і інші настройки, але про них ми згадаємо як-небудь іншим разом.
Стильові розчерки ми розглянемо на прикладі шрифту Trilogy Fatface Regular з Fontdeck:
І отримаємо наступний результат:
Стильові набори ще цікавіше. Шрифт Majestic Mishmash містить абсолютно різні стильові набори:
На зображенні нижче показаний цей шрифт в звичайному вигляді (стандартному, без використання font-feature-settings):
Тепер додамо CSS:
І ось результат:
Поради щодо використання можливостей шрифтів
Щоб повністю розкрити тему, я дам кілька порад по використанню можливостей шрифтів.
Створюйте тестові файли
Коли ви визначаєтесь з вибором шрифту, буде непогано створити тестовий файл з різними розділами тексту, які ви можете стилізувати з усіма доступними в ньому засобами. Потім ви можете точно також перевірити на сторінці інший шрифт і перевірити, як додаткові можливості шрифту впливають на рендеринг.
Робіть спеціальні набори з потрібними вам можливостями шрифтів
Як правило, ви незацікавлені в тому, щоб додаткові можливості шрифту застосовувалися до всієї сторінці. Швидше за все, ви просто хочете замінити заголовки або окремі ділянки тексту. У багатьох випадках ви можете зберегти трафік і ресурси, використовуючи невеликі вибірки з шрифту, що містять потрібні символи і фичи.