Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.
Nächste Überarbeitung | Vorherige Überarbeitung | ||
css:fontface [2014/07/30 22:59] – angelegt admin | css:fontface [2019/02/11 20:26] (aktuell) – admin | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
- | sdfsd | + | ====== @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 // | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ==== 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. | ||
+ | |||
+ | * **TTF:** Chrome, Firefox, Safari | ||
+ | * **EOT:** Internet Explorer < 9 | ||
+ | * **SVG:** iPhone, iPad | ||
+ | * **WOFF:** Opera, Internet Explorer 9+ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ==== Generelle Syntax ==== | ||
+ | |||
+ | Bei der Einbindung spielt die Reihenfolge der Formate ebenso eine Rolle wie Sonderzeichen. Das Fragezeichen hinter '' | ||
+ | |||
+ | <code css> | ||
+ | @font-face { | ||
+ | font-family: | ||
+ | src: url(' | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ==== Browser und ihre Eigenheiten ==== | ||
+ | |||
+ | === Opera === | ||
+ | **Wichtig: | ||
+ | |||
+ | |||
+ | === Firefox === | ||
+ | **Wichtig: | ||
+ |