Verwendung von Web-Schriftarten
Das Folgende ist ein Auszug aus dem Webfont-Handbuch von Bram Stein. Kaufen Sie es hier .
Web-Schriftarten werden in CSS durch die definiert @ Schriftart Regel. Wenn Sie ein Webentwickler sind, haben Sie höchstwahrscheinlich eine geschrieben, kopiert und eingefügt oder zumindest eine gesehen @ Schriftart Regel.
Lassen Sie uns der Vollständigkeit halber jedoch kurz ein grundlegendes Beispiel durchgehen:
@font-face { font-family: Elena; src: url(elena-regular.woff); }Dadurch wird eine neue Web-Schriftfamilie erstellt, auf die über die verwiesen werden kann Schriftfamilie oder machen Kurzschrift Eigentum. Aber hier fehlt etwas. Stellen Sie beim Verweisen auf eine Web-Schriftart in einem Schriftstapel immer sicher, dass mindestens eine Fallback-Schriftart enthalten ist, falls die Web-Schriftart nicht geladen werden kann.
Wenn Elena nicht geladen werden kann, greift der Browser auf das Generikum zurück Serife Schriftfamilie:
p { font-family: Elena, serif; }Fallback-Schriftarten bieten noch mehr, aber lassen Sie uns unseren Schriftstapel vorerst einfach halten, indem wir nur die generischen Schriftarten einbeziehen Serife und serifenlos Schriftfamilien.
Schriftfamilien
Das Erstellen einer Schriftfamilie mit mehreren Stilen erfolgt durch Erstellen eines @ Schriftart Regel für jeden Stil und mit dem gleichen Schriftfamilie Name. Folgende @ Schriftart Regeln schaffen eine Familie mit einem normalen und mutigen Stil:
@font-face { font-family: Elena; src: url(elena-regular.woff); font-weight: normal; } @font-face { font-family: Elena; src: url(elena-bold.woff); font-weight: bold; }Sie können diese Schriftfamilie in Ihrem CSS verwenden, indem Sie in Ihren Selektoren auf den Familiennamen und das Gewicht verweisen. Dies wendet den regulären Stil auf Absätze und den fetten Stil auf Absätze an stark Absätze:
p { font-family: Elena, serif; } p strong { font-weight: bold; }Außerdem Schriftgröße , @ Schriftart akzeptiert auch die Schriftstil und Font-Stretch Eigenschaftsbeschreibungen, die Stile wie kursiv und komprimiert definieren. Alle drei Eigenschaftsbeschreibungen können verwendet werden, um eine einzelne Schriftfamilie mit mehreren Stilen zu erstellen. Theoretisch können Sie so eine Familie mit 243 einzelnen Stilen (neun) erstellen Schriftgröße Werte × drei Schriftstil Werte × neun Font-Stretch Werte).
In der Praxis sind Sie jedoch auf 27 Werte beschränkt, da einige Browser dies nicht unterstützen Font-Stretch . Schauen Sie sich die folgende Tabelle an, um zu sehen, welche Browser Sie verwenden können, und schauen Sie Hier für detailliertere Informationen.
Mit etwas Glück werden die verbleibenden Browser das implementieren Font-Stretch Eigenschaft bald, und Sie werden in der Lage sein, alle 243 Schriftklassifikationen zu verwenden.
Schriftformate
Das src Der Deskriptor teilt einem Browser mit, wo eine Schriftartdatei abgerufen werden soll. In den vorherigen Beispielen wurde ein einzelnes Schriftformat verwendet. Oft werden jedoch URLs zu mehreren Schriftformaten in Kombination mit Formathinweisen angezeigt, die nach der URL mit dem angehängt werden Format ('Wert') Syntax.
Formathinweise teilen dem Browser das Format der Schriftartdatei unter einer bestimmten URL mit.
@font-face { font-family: Elena; src: url(elena-regular.woff2) format('woff2'), url(elena-regular.woff) format('woff'); }Wenn Sie mehrere Formate auflisten, wählen moderne Browser das erste von ihnen unterstützte Format basierend auf dem Formathinweis aus. Daher ist es wichtig, Web-Schriftformate in der Reihenfolge der besten Komprimierung aufzulisten.
Auch wenn Formathinweise optional sind, fügen Sie sie immer hinzu - sie informieren den Browser über das Format, ohne dass die Schriftart heruntergeladen werden muss. Wenn ein Browser beispielsweise WOFF2 nicht unterstützt, aber WOFF unterstützt, kann er die WOFF2-Schriftartdatei basierend auf dem Formathinweis überspringen.
Browser unterstützen verschiedene Web-Schriftformate: OpenType (TrueType), EOT, WOFF und WOFF2. Einige Browser unterstützen auch SVG-Schriftarten, diese sind jedoch veraltet und sollten nicht mehr verwendet werden (und sollten nicht mit der verwechselt werden) neues OpenType-SVG-Format ).
EOT, WOFF und WOFF2 sind technisch gesehen keine Schriftformate. Es handelt sich um komprimierte OpenType-Dateien mit unterschiedlichem Komprimierungsgrad. WOFF2 bietet die beste Komprimierung, gefolgt von WOFF und EOT.
Bei der Untersuchung der Abdeckung für alle Browser sind Sie möglicherweise auf etwas gestoßen, das als 'The' bezeichnet wird kugelsicher @ Schriftart Syntax von Fontspring.
Die kugelsichere Syntax verwendet EOT-, WOFF2-, WOFF-, OpenType- und SVG-Raw-Schriftdateien für maximale Browserabdeckung:
@font-face { font-family: Elena; src: url(elena.eot?#iefix) format('embedded-opentype'), url(elena.woff2) format('woff2'), url(elena.woff) format('woff'), url(elena.otf) format('opentype'), url(elena.svg#elena) format('svg'); }Die erste URL-Zeile sieht für Sie möglicherweise etwas seltsam aus. Versionen von Internet Explorer 8 und niedriger unterstützen die Syntax für mehrere Schriftformate nicht und behandeln den gesamten Wert von src Eigenschaft als URL.
Die kugelsichere Syntax täuscht Internet Explorer 8 und darunter vor, dass die verbleibenden URLs Teil der Fragmentkennung der ersten URL sind. Da Fragment-IDs beim Herunterladen von Dateien ignoriert werden, verwenden Internet Explorer 8 und niedriger einfach die erste URL.
Andere Browser als Internet Explorer überspringen die Zeile, da sie EOT nicht unterstützen.
Der Rest der Einträge entspricht Ihren Erwartungen: Schriftformate, die in der Reihenfolge ihrer Präferenz aufgelistet sind.
Aber ist die kugelsichere Syntax immer noch relevant? Nein, ich denke, es ist schädlich. SVG-Schriftarten sind veraltet und werden nur von Browsern unterstützt, die nicht mehr verwendet werden.
Die meisten Websites unterstützen Internet Explorer 9 und höher. In der Syntax wird jedoch EOT als erstes bevorzugtes Schriftformat aufgeführt. Obwohl Internet Explorer 9 und höher WOFF unterstützen, laden diese Versionen die EOT-Datei trotzdem herunter, einfach weil sie zuerst aufgeführt wird.
Da die meisten Websites keine alten Browser mehr unterstützen, empfehle ich dringend die Verwendung einer vereinfachten Syntax. Diese vereinfachte Syntax gilt für alle modernen Browser sowie für etwas ältere, die noch aktiv verwendet werden, z. B. Android 4.4 und frühere Versionen:
@font-face { font-family: Elena; src: url(elena.woff2) format('woff2'), url(elena.woff) format('woff'), url(elena.otf) format('opentype'); }Obwohl immer noch ältere Android-Versionen verwendet werden, schwindet die weltweite Abhängigkeit von diesen Browsern rapide. In Kürze werden Sie wahrscheinlich auch das OpenType-Rohformat löschen und die Syntax noch weiter vereinfachen können:
@font-face { font-family: Elena; src: url(elena.woff2) format('woff2'), url(elena.woff) format('woff'); }In diesem Fall sieht jemand, der einen älteren Browser ausführt, einfach Ihre Fallback-Schriftarten anstelle der Web-Schriftarten. Das ist gut; Sie können den Inhalt weiterhin in der Fallback-Schriftart lesen.
Es gibt noch einen anderen möglichen Wert für die src Deskriptor. Das lokal Die Funktion nimmt den Namen einer lokalen Schriftfamilie an. Wenn die Schriftart zufällig auf dem System installiert ist, verwendet der Browser diese stattdessen, wodurch ein zusätzlicher Download vermieden wird.
@font-face { font-family: Elena; src: local('Elena'), url(elena-regular.woff2) format('woff2'), url(elena-regular.woff) format('woff'); }Dies scheint zwar eine großartige Optimierung zu sein, aber nichts garantiert, dass die lokale Schriftart mit Ihrer Web-Schriftart übereinstimmt.
Möglicherweise erhalten Sie eine andere Version der Schriftart, eine Schriftart mit unterschiedlicher Sprachunterstützung oder sogar eine völlig andere Schriftart. Aus diesem Grund empfehle ich normalerweise, das nicht zu verwenden lokal Funktion, es sei denn, Sie finden diese Nachteile akzeptabel.
Dies ist ein Auszug aus Bram Steins Webfont-Handbuch , aus einem Buch auseinander. Darin untersucht er, was bei der Auswahl von Web-Schriftarten zu beachten ist, wie diese effektiv verwendet werden und wie die Leistung optimiert werden kann.
Zum Thema passende Artikel:
