Benutzer-Werkzeuge

Webseiten-Werkzeuge


css:fontface

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
css:fontface [2015/12/03 19:32]
127.0.0.1 Externe Bearbeitung
css:fontface [2019/02/11 20:26] (aktuell)
admin
Zeile 1: Zeile 1:
 ====== @font-face ====== ====== @font-face ======
 +
 +===== Aktualisierte Syntax (2019) =====
 +
 +<code css>
 +@font-face {
 +    font-family:​ "​Lato";​
 +    src: local('​Lato Regular'​),​
 +         ​local('​Lato-Regular'​),​
 +         ​local('​Lato'​),​
 +         ​url('/​path/​to/​webfonts/​lato-regular-webfont.woff2'​) format('​woff2'​),​
 +         ​url('/​path/​to/​webfonts/​lato-regular-webfont.woff'​) format('​woff'​);​
 +    font-display:​ swap;
 +    font-weight:​ normal;
 +    font-style: normal;
 +}
 +
 +@font-face {
 +    font-family:​ "​Lato";​
 +    src: local('​Lato Italic'​),​
 +         ​local('​Lato-Italic'​),​
 +         ​url('/​path/​to/​webfonts/​lato-italic-webfont.woff2'​) format('​woff2'​),​
 +         ​url('/​path/​to/​webfonts/​lato-italic-webfont.woff'​) format('​woff'​);​
 +    font-display:​ swap;
 +    font-weight:​ normal;
 +    font-style: italic;
 +}
 +
 +@font-face {
 +    font-family:​ "​Lato";​
 +    src: local('​Lato Bold'​),​
 +         ​local('​Lato-Bold'​),​
 +         ​url('/​path/​to/​webfonts/​lato-bold-webfont.woff2'​) format('​woff2'​),​
 +         ​url('/​path/​to/​webfonts/​lato-bold-webfont.woff'​) format('​woff'​);​
 +    font-display:​ swap;
 +    font-weight:​ 700;
 +    font-style: normal;
 +}
 +</​code>​
 +
 +===== Erläuterung aus 2015 =====
  
 Über Kleinigkeiten bei der Einbindung von Webfonts kann man schnell stolpern. Es gibt zig //​Bulletproof @font-face Syntaxen//, an dieser Front wird stetig gearbeitet. Jeder Browser hat seine Eigenheiten,​ wenn es darum geht, Schriften richtig einzubetten. Über Kleinigkeiten bei der Einbindung von Webfonts kann man schnell stolpern. Es gibt zig //​Bulletproof @font-face Syntaxen//, an dieser Front wird stetig gearbeitet. Jeder Browser hat seine Eigenheiten,​ wenn es darum geht, Schriften richtig einzubetten.
Zeile 5: Zeile 45:
 ---- ----
  
-===== Welche Formate? ​=====+==== Welche Formate? ====
  
 Diese Auflistung ist nur grob, einige Browser können in neueren Version auch mehr Formate lesen. Es soll nur klarmachen, dass alle vier Formate nötig sind, um den Webfont in allen relevanten Browsern darstellen zu können. Diese Auflistung ist nur grob, einige Browser können in neueren Version auch mehr Formate lesen. Es soll nur klarmachen, dass alle vier Formate nötig sind, um den Webfont in allen relevanten Browsern darstellen zu können.
Zeile 16: Zeile 56:
 ---- ----
  
-===== Generelle Syntax ​=====+==== Generelle Syntax ====
  
 Bei der Einbindung spielt die Reihenfolge der Formate ebenso eine Rolle wie Sonderzeichen. Das Fragezeichen hinter ''​eot''​ verhindert beispielsweise einen 404-Fehler im Internet Explorer. Beim ''​svg''​ wird anschließend das Hash-Zeichen mit korrektem Schriftnamen benötigt, der in der SVG-Datei gespeichert ist (z.B. ''<​font id="​open_sans_condensedbold"​ horiz-adv-x="​948"​ >''​). Bei der Einbindung spielt die Reihenfolge der Formate ebenso eine Rolle wie Sonderzeichen. Das Fragezeichen hinter ''​eot''​ verhindert beispielsweise einen 404-Fehler im Internet Explorer. Beim ''​svg''​ wird anschließend das Hash-Zeichen mit korrektem Schriftnamen benötigt, der in der SVG-Datei gespeichert ist (z.B. ''<​font id="​open_sans_condensedbold"​ horiz-adv-x="​948"​ >''​).
Zeile 32: Zeile 72:
 ---- ----
  
-===== Browser und ihre Eigenheiten ​=====+==== Browser und ihre Eigenheiten ====
  
-==== Opera ====+=== Opera ===
 **Wichtig:​** font-family unbedingt mit __doppelten Anführungszeichen__! **Wichtig:​** font-family unbedingt mit __doppelten Anführungszeichen__!
  
  
-==== Firefox ​====+=== Firefox ===
 **Wichtig:​** Schrift-Dateien __im gleichen Ordner__ wie CSS-Datei! Es gibt auch Lösungen über .htaccess-Einträge und absolute URLs, die in manchen Fällen dennoch nicht zum Ziel führen. Lokal zeigt der Firefox niemals Webfonts an. **Wichtig:​** Schrift-Dateien __im gleichen Ordner__ wie CSS-Datei! Es gibt auch Lösungen über .htaccess-Einträge und absolute URLs, die in manchen Fällen dennoch nicht zum Ziel führen. Lokal zeigt der Firefox niemals Webfonts an.
  
  
css/fontface.txt · Zuletzt geändert: 2019/02/11 20:26 von admin