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
» Эрика Мейера - «Как выделить текст курсивом» Криса Койера