Public Service Announcement: Achten Sie auf Ihr @font-face Schriftgewicht

Nehmen wir an, Sie stöbern auf Google Web Fonts nach einer kostenlosen Schriftart für Ihre Website. Sie finden eine, die Ihnen gefällt …

Sie denken, sie würde als Überschrift auf Ihrer Website gut aussehen. Also folgen Sie den Anweisungen auf Google Web Fonts „schnelle Nutzung“.

1) CSS-Link auf die Seite kopieren/einfügen

<link href='http://fonts.googleapis.com/css?family=Spicy+Rice' rel='stylesheet' type='text/css'>

2) font-family CSS in Ihr Überschriften-CSS kopieren/einfügen

h1, h2, h3, h4, h5 {
   font-family: 'Spicy Rice', cursive;

   /* Your other headings CSS */
}

Und siehe da! Sie haben es geschafft, Ihre Überschriften sind jetzt in Ihrer speziell ausgewählten Schriftart.

Aber dann bemerken Sie, dass die Schriftart etwas schlammiger ist, als Sie möchten. Es mag schwer zu erklären sein, aber sie sieht einfach nicht so gut aus, wie als Sie sie von Google Web Fonts ausgewählt haben. Oder vielleicht bemerkt es jemand anderes und

Das Problem ist, dass die Schriftart *schlammiger* ist als Sie sie ursprünglich gesehen haben, und das alles wegen font-weight.

Wie Sie sehen, ist das Standard-Schriftgewicht für Überschriften in Browsern „fett“ (oder genauer gesagt 700). Und wenn Sie bei der Auswahl dieser Schriftart genau hingesehen haben, haben Sie vielleicht bemerkt

Sie könnten diesem zum Opfer fallen, wenn

1. Sie keine Zurücksetzung verwenden und kein font-weight für Überschriften angegeben haben (standardmäßig wird die Benutzerschnittstellen-Stilistik von fett verwendet).
2. Sie verwenden Normalize.css anstelle einer Zurücksetzung, die das font-weight nicht anpasst, da fett ein konsistenter plattformübergreifender Standard ist.
3. Sie explizit font-weight auf fett für Überschriften setzen (wie Sie es vielleicht bei einer Zurücksetzung tun).

Das ist nicht die Schuld von Google Web Fonts oder der Schriftart selbst. Es ist nur so, dass diese Schriftart keine fette Variante hat und Sie sie explizit anfordern. Das bedeutet, der Browser versucht, die Schriftart für Sie fett zu machen, was etwas ist, das er *kann*, aber *nicht besonders gut kann* (daher die Schlammigheit).

Die Behebung ist so einfach wie die genaue Angabe Ihres Schriftgewichts, um dem zu entsprechen, was die Schriftart bietet.

h1, h2, h3, h4, h5 {
   font-family: 'Spicy Rice', cursive;
   font-weight: 400; /* Be specific */
   /* Your other headings CSS */
}

Also ja. Kurz gesagt

Dies ist ein Problem, das am häufigsten bei dekorativen Schriftarten auftritt, da dort am häufigsten nur ein Schriftgewicht verfügbar ist. Ich würde sagen, Schriftarten von bezahlten Diensten wie Typekit bieten im Allgemeinen Schriftarten mit einer größeren Vielfalt an verfügbaren Schriftgewichten, aber das bedeutet nicht, dass es kein Problem mit Typekit sein kann, da es intelligent/empfohlen ist, so wenige Gewichte wie möglich zu laden, um die Ladezeit Ihrer Seite zu verkürzen.

Beachten Sie auch, dass dies ein häufiges Problem bei Kursivschriften ist. Angenommen, Sie entscheiden sich, eine normale, fette und kursive Version einer Schriftart zu laden. Wenn Sie dann Text haben, der sowohl fett als auch kursiv ist, muss der Browser ihn fälschen (weil er keine fette kursive Version hat) und er wird schlecht aussehen. Mir passiert das auf dieser Website, aber ich glaube nicht, dass das Laden einer ganzen zusätzlichen Version der Website es wert ist, also versuche ich es einfach zu vermeiden.