Шрифт-синтез - 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: Oblique может быть синтезирован браузером
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 сообщает о 20,21% общемировом покрытии font-synthesisсобственности.

Рабочий стол

IE Край Fire Fox Хром Сафари Опера
Нет Нет 34+ Нет 9+ Нет

Мобильный

iOS Safari опера мини Браузер Android Chrome для Android Firefox для Android
9+ Все Нет Нет 68

Хотите использовать font-synthesisв электронной почте? Campaign Monitor сообщает, что его поддерживают следующие клиенты:

  • Apple Mail 10+
  • Outlook для Mac
  • Приложение AOL Alto для iOS
  • Почта iOS 10+
  • Воробей
  • G Suite
  • Gmail
  • Google Inbox

Дополнительная информация

  • Спецификация CSS Fonts Module Level 4
  • «Тест CSS3: font-synthesis» Эрика Мейера
  • «Как выделить текст курсивом» Криса Койера