В 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 отчита 20,21% глобално покритие за font-synthesis
имота.
работен плот
IE | Ръб, край | Firefox | Chrome | Сафари | Опера |
---|---|---|---|---|---|
Не | Не | 34+ | Не | 9+ | Не |
Подвижен
iOS Safari | опера мини | Браузър за 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 Inbox
Повече информация
- Спецификация на модул CSS Fonts Level 4
- „Тест CSS3:
font-synthesis
“ от Ерик Майер - „Как да поставя курсив на текст“ от Крис Койер