font-synthesis

Die CSS-Eigenschaft font-systhesis gibt dem Browser Anweisungen, wie mit fetten und kursiven Schriftzeichen umzugehen ist, wenn die angegebene font-family diese nicht enthält.

Nehmen wir Lato von Google Fonts als Beispiel. Dort wird angegeben, dass es 10 verschiedene Variationen der Schriftart gibt.

Jede dieser Schriftarten-Variationen ist technisch gesehen eine andere Schriftdatei. Wenn wir bestimmte Schriftschnitte und Stile verwenden möchten, würden wir diese Dateien verknüpfen, damit der Browser etwas zum Laden hat.

Nicht alle Schriftarten enthalten jedoch Dateien zur Handhabung von Schriftschnitt und Stil. In diesen Fällen „synthetisiert“ der Browser das Erscheinungsbild selbst. Der Browser tut sein Bestes, aber künstliche Fette und Stile machen Text manchmal weniger lesbar; das heißt, weniger lesbar als eine wirklich gestaltete Version. Im mildesten Fall können Zeichen überlappen. In schwereren Fällen ist der Text vollständig unlesbar oder kann sogar die Bedeutung ändern – wie es bei Sprachen wie Chinesisch, Japanisch, Koreanisch und anderen logografischen Schriften passieren kann.

Dort kommt font-synthesis ins Spiel. Es steuert, welche Schriftarten der Browser synthetisieren darf.

Syntax

.element {
  font-synthesis: none | [ weight || style ];
}

In einfacher Sprache bedeutet dies, dass font-synthesis Folgendes akzeptiert:

• einen Wert von none
• entweder weight oder style
• sowohl weight als auch style

Es ist erwähnenswert, dass font-synthesis als Kurzschrifteigenschaft gilt. Laut Spezifikation ist es eine Kombination aus font-synthesis-weight und font-synthesis-style, wobei beide Werte von auto oder none annehmen. Da es möglich ist, mit der Kurzschrifteigenschaft den gleichen Effekt zu erzielen, ist dies wahrscheinlich der beste Weg.

Werte

• none: Weder Fett noch Kursiv dürfen synthetisiert werden
• weight: Fett darf vom Browser synthetisiert werden
• style: Kursiv darf 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-synthesis kann mit allen Elementen verwendet werden, einschließlich der Pseudo-Elemente ::first-letter und ::first-line.

Es kann Fälle geben, in denen es sinnvoll ist, dem Browser nicht zu erlauben, fette und kursive Zeichen für eine ganze Sprache zu synthetisieren, da beides Zeichen verdecken kann. Hier ist ein Beispiel aus der Spezifikation, das die Synthese von fetten und kursiven Schriftfaces deaktiviert, die arabische Zeichen enthalten

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

Demo

Browser-Unterstützung

Zum Zeitpunkt der Erstellung berichtet caniuse über eine globale Abdeckung von 20,21 % für die Eigenschaft font-synthesis.

Desktop

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	Nein	34+	Nein	9+	Nein

Mobil

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

Möchten Sie font-synthesis in E-Mails verwenden? Campaign Monitor berichtet, dass es von den folgenden Clients unterstützt wird

• Apple Mail 10+
• Outlook für Mac
• AOL Alto iOS App
• iOS Mail 10+
• Sparrow
• G Suite
• Gmail
• Google Inbox

Weitere Informationen

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