Синтез на шрифтове - 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 отчита 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“ от Ерик Майер
  • „Как да поставя курсив на текст“ от Крис Койер