Lettertypesynthese - CSS-trucs

Anonim

De font-systhesiseigenschap in CSS geeft de browser instructies voor het omgaan met vetgedrukte en cursieve lettertypen wanneer het opgegeven font-familydeze niet bevat.

Laten we Lato van Google Fonts als voorbeeld nemen. Er staat dat er 10 verschillende varianten van het lettertype zijn.

Elk van deze lettertypevariaties is technisch gezien een ander lettertypebestand. Als we bepaalde gewichten en stijlen willen gebruiken, koppelen we die bestanden aan elkaar, zodat de browser iets te laden heeft.

Voor deze zin zijn normaal gesproken vier verschillende lettertypebestanden nodig.

Maar niet alle lettertypen bevatten bestanden voor het omgaan met gewicht en stijl. In die gevallen zal de browser het uiterlijk zelf "synthetiseren". De browser doet zijn best, maar nep-vetgedrag en stijl maken tekst soms minder leesbaar; dat wil zeggen, minder leesbaar dan een echt ontworpen versie. In de mildste gevallen kunnen we overlappende tekens zien. In ernstigere gevallen is de tekst volledig onleesbaar of kan de betekenis zelfs veranderen - zoals kan gebeuren met talen als Chinees, Japans, Koreaans en andere logografische scripts.

Dat is waar het font-synthesisomkomt. Het bepaalt welke lettertypen de browser mag synthetiseren.

Syntaxis

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

In gewoon Engels font-synthesisaccepteert dit betekent :

  • een waarde van none
  • ofwel weightofstyle
  • beide weightenstyle

Het is vermeldenswaard dat font-synthesisdit als een steno-eigenschap wordt beschouwd. Volgens de specificatie is het een combinatie van font-synthesis-weighten font-synthesis-stylewaar beide waarden accepteren van autoof none. Omdat het mogelijk is om hetzelfde effect te krijgen met de steno, is dat waarschijnlijk de beste manier om te gaan.

Waarden

  • none: Noch vet noch schuin mag worden gesynthetiseerd
  • weight: Vet kan worden gesynthetiseerd door de browser
  • style: Oblique kan door de browser worden gesynthetiseerd
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 */

Gebruik

font-synthesiskan worden gebruikt met alle elementen, inclusief de ::first-letteren ::first-linepseudo-elementen.

Er kunnen gevallen zijn waarin het niet logisch is om de browser vet en schuin te laten synthetiseren in een hele taal, omdat beide tekens kunnen verdoezelen. Hier is een voorbeeld uit de specificatie die gesynthetiseerde vetgedrukte en schuine lettertypen met Arabische tekens uitschakelt:

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

Demo

Browser-ondersteuning

Op het moment van schrijven rapporteert caniuse 20,21% wereldwijde dekking voor het font-synthesisonroerend goed.

Bureaublad

D.W.Z Rand Firefox Chrome Safari Opera
Nee Nee 34+ Nee 9+ Nee

Mobiel

iOS Safari Opera Mini Android-browser Chrome voor Android Firefox voor Android
9+ Alle Nee Nee 68

Gebruiken font-synthesisin e-mail? Campaign Monitor meldt dat het wordt ondersteund door de volgende klanten:

  • Apple Mail 10+
  • Outlook voor Mac
  • AOL Alto iOS-app
  • iOS Mail 10+
  • Mus
  • G Suite
  • Gmail
  • Google Inbox

Meer informatie

  • CSS Fonts Module Level 4 Specificatie
  • "CSS3-test: font-synthesis" door Eric Meyer
  • "Hoe tekst cursief te maken" door Chris Coyier