Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.
Beide Seiten, vorherige ÜberarbeitungVorherige ÜberarbeitungNächste Überarbeitung | Vorherige Überarbeitung | ||
css:fontface [2014/07/30 23:21] – admin | 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: | ||
+ | src: local(' | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | font-display: | ||
+ | font-weight: | ||
+ | font-style: normal; | ||
+ | } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: | ||
+ | src: local(' | ||
+ | | ||
+ | | ||
+ | | ||
+ | font-display: | ||
+ | font-weight: | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: | ||
+ | src: local(' | ||
+ | | ||
+ | | ||
+ | | ||
+ | font-display: | ||
+ | font-weight: | ||
+ | font-style: normal; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== Erläuterung aus 2015 ===== | ||
Über Kleinigkeiten bei der Einbindung von Webfonts kann man schnell stolpern. Es gibt zig // | Über Kleinigkeiten bei der Einbindung von Webfonts kann man schnell stolpern. Es gibt zig // | ||
- | ===== 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 12: | Zeile 54: | ||
* **WOFF:** Opera, Internet Explorer 9+ | * **WOFF:** Opera, Internet Explorer 9+ | ||
- | ===== Generelle Syntax | + | ---- |
+ | |||
+ | ==== Generelle Syntax ==== | ||
Bei der Einbindung spielt die Reihenfolge der Formate ebenso eine Rolle wie Sonderzeichen. Das Fragezeichen hinter '' | Bei der Einbindung spielt die Reihenfolge der Formate ebenso eine Rolle wie Sonderzeichen. Das Fragezeichen hinter '' | ||
Zeile 26: | Zeile 70: | ||
</ | </ | ||
- | ===== Browser und ihre Eigenheiten | + | ---- |
+ | |||
+ | ==== Browser und ihre Eigenheiten ==== | ||
- | ==== Opera ==== | + | === Opera === |
- | **Lösung:** font-family unbedingt mit __doppelten Anführungszeichen__! | + | **Wichtig:** font-family unbedingt mit __doppelten Anführungszeichen__! |
- | ==== Firefox | + | === Firefox === |
- | **Lösung:** 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. | + | **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. |