Schriftsynthese - CSS-Tricks

Anonim

Die font-systhesisEigenschaft in CSS gibt dem Browser Anweisungen zum Umgang mit fettgedruckten und kursiven Schriftzeichen, wenn die angegebenen font-familydiese nicht enthalten.

Nehmen wir als Beispiel Lato aus Google Fonts. Es heißt, es gibt 10 verschiedene Variationen der Schriftart.

Jede dieser Schriftvarianten ist technisch eine andere Schriftartdatei. Wenn wir bestimmte Gewichte und Stile verwenden möchten, verknüpfen wir diese Dateien, damit der Browser etwas laden kann.

Dieser Satz würde normalerweise vier verschiedene Schriftdateien erfordern.

Nicht alle Schriftarten enthalten jedoch Dateien für die Handhabung von Gewicht und Stil. In diesen Fällen „synthetisiert“ der Browser das Erscheinungsbild selbst. Der Browser tut das Beste, was er kann, aber faux Fettdruck und Stil machen Text manchmal weniger lesbar. Das heißt, weniger lesbar als eine wirklich entworfene Version. In den mildesten Fällen können sich Zeichen überschneiden. In schwereren Fällen ist der Text völlig unlesbar oder kann sogar die Bedeutung ändern - wie dies bei Sprachen wie Chinesisch, Japanisch, Koreanisch und anderen logografischen Skripten der Fall sein kann.

Hier font-synthesiskommt es ins Spiel. Es steuert, welche Schriften der Browser synthetisieren darf.

Syntax

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

Im Klartext bedeutet dies font-synthesis:

  • ein Wert von none
  • entweder weightoderstyle
  • beide weightundstyle

Es ist erwähnenswert, dass dies font-synthesisals Kurzform angesehen wird. Gemäß der Spezifikation ist es eine Kombination von font-synthesis-weightund font-synthesis-stylewobei beide Werte von autooder akzeptieren none. Da es möglich ist, den gleichen Effekt mit der Kurzschrift zu erzielen, ist dies wahrscheinlich der beste Weg.

Werte

  • none: Weder fett noch schräg dürfen synthetisiert werden
  • weight: Fett kann vom Browser synthetisiert werden
  • style: Oblique kann vom Browser synthetisiert werden
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 */

Verwendung

font-synthesiskann mit allen Elementen verwendet werden, einschließlich der ::first-letterund ::first-linePseudo-Elemente.

Es kann Fälle geben, in denen es sinnvoll ist, dem Browser nicht zu erlauben, Fett und Schräg in einer ganzen Sprache zu synthetisieren, da beide Zeichen verdecken können. Hier ist ein Beispiel aus der Spezifikation, das synthetisierte fette und schräge Schriftarten mit arabischen Zeichen deaktiviert:

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

Demo

Browser-Unterstützung

Zum Zeitpunkt des Schreibens meldet caniuse eine weltweite Abdeckung der font-synthesisImmobilie von 20,21% .

Desktop

IE Kante Feuerfuchs Chrom Safari Oper
Nein Nein 34+ Nein 9+ Nein

Handy, Mobiltelefon

iOS Safari Opera Mini Android Browser Chrome für Android Firefox für Android
9+ Alle Nein Nein 68

Möchten Sie font-synthesisin E-Mail verwenden? Campaign Monitor meldet, dass es von folgenden Clients unterstützt wird:

  • Apple Mail 10+
  • Outlook für Mac
  • AOL Alto iOS App
  • iOS Mail 10+
  • Spatz
  • G Suite
  • Google Mail
  • Google-Posteingang

Mehr Informationen

  • CSS Fonts Module Level 4 Spezifikation
  • „CSS3-Test: font-synthesis“ von Eric Meyer
  • "Wie man Text kursiv schreibt" von Chris Coyier