Шрифт-синтез - CSS-хитрощі

Anonim

font-systhesisВластивість в CSS дає інструкцію браузера для того, як обробляти шрифт жирного і курсив характеру , коли зазначений font-familyне включають їх.

Візьмемо для прикладу Lato з Google Fonts. Там сказано, що існує 10 різних варіантів шрифту.

Кожен із цих варіантів шрифтів є технічно різним файлом шрифту. Якщо ми хочемо використовувати певні ваги та стилі, ми б пов’язали ці файли, щоб браузер мав що завантажити.

Для цього речення зазвичай потрібні чотири різні шрифтові файли.

Але не всі шрифти містять файли для обробки ваги та стилю. У цих випадках браузер «синтезує» зовнішній вигляд. Браузер робить все, що може, але підроблений жир і стиль іноді робить текст менш читабельним; тобто менш розбірливий, ніж справді розроблена версія. У найлегших випадках ми можемо бачити, як символи перекриваються. У більш серйозних випадках текст є повністю нечитабельним або може навіть змінити значення - як це могло статися з такими мовами, як китайська, японська, корейська та інші логотипи.

Тут він font-synthesisз’являється. Він контролює, які шрифти браузеру дозволено синтезувати.

Синтаксис

.element ( font-synthesis: none | ( weight || style ); )

Простою англійською мовою, це означає font-synthesis, що приймаються:

  • значення none
  • або weightабоstyle
  • як weightіstyle

Варто зазначити, що font-synthesisце вважається стенографічною власністю. Відповідно до специфікації, це поєднання font-synthesis-weightі font-synthesis-styleде обидва приймають значення autoабо none. Оскільки можна отримати той самий ефект, використовуючи скорочення, це, мабуть, найкращий спосіб.

Цінності

  • none: Не можна синтезувати ні жирний, ні косий шрифт
  • weight: Жирний шрифт може бути синтезований браузером
  • style: Косий може синтезуватися браузером
font-synthesis: none; /* browser will not synthesize any font faces */ font-synthesis: style; /* browser will not synthesize a bold font face */ font-synthesis: weight; /* browser will not synthesize an oblique font face */ font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */

Використання

font-synthesisможе використовуватися з усіма елементами, включаючи ::first-letterі ::first-lineпсевдоелементи.

Можуть бути випадки, коли не дозволяти браузеру синтезувати жирний і косий текст на цілій мові має сенс, оскільки будь-який з них може затьмарити символи. Ось приклад, витягнутий із специфікації, який вимикає синтезовані жирні та косі шрифти, що містять арабські символи:

/* Disables synthetic bolded and obliqued characters in Arabic */ *:lang(ar) ( font-synthesis: none; )

Демо

Підтримка браузера

На момент написання статті caniuse повідомляє про загальне покриття font-synthesisвласності на 20,21% .

Робочий стіл

IE Край Firefox Chrome Сафарі Опера
Ні Ні 34+ Ні 9+ Ні

Мобільний

iOS Safari Opera Mini Браузер Android Chrome для Android Firefox для Android
9+ Всі Ні Ні 68

Хочете використовувати font-synthesisв електронній пошті? Campaign Monitor повідомляє, що його підтримують такі клієнти:

  • Apple Mail 10+
  • Outlook для Mac
  • Додаток AOL Alto для iOS
  • iOS Mail 10+
  • Горобець
  • G Suite
  • Gmail
  • Google Вхідні

Більше інформації

  • Специфікація модуля шрифтів CSS рівня 4
  • «Тест CSS3: font-synthesis» Еріка Мейєра
  • “Як виділити курсив текстом” Кріса Койєра