Advanced CSS - Serverseitige Schriften
1. Die Formate
Tja, wie könnte es auch anders. Es gibt mal wieder eine ganze Menge davon, wegen der Browser halt. Als da wären:
.eot
(Embeded Open Type).otf
(OpenType).svg
(SVG Fonts).ttf
(TrueType).woff
(Web Open Font Format)
Wer kann was?
Nun der Internet Explorer 8 kommt nur mit Embeded Open Type klar. OpenType dagegen funktioniert in allen modernen Browsern bis auf den IE bis einschließlich Version 10. SVG Fonts sind wohl für alte iOS-Systeme gedacht und für TrueType gilt dasselbe wie für OpenType.
Preiset den Herrn!
Denn gottlob gibt es das Web Open Font Fomat. Das beherrschen alle richtigen Browser und sogar der IE ab Version 9. Das ist aber nicht der einzige Vorteil, denn die Dateigröße ist ebenfalls für das Internet optimiert, also ziemlich klein.
Konverter
... gibt es mittlerweile wie Sand am Meer. Ich persönlich benutze gerne diesen hier. Und das Schöne daran ist, dass hier auch noch geprüft wird (keine Ahnung wie), ob man die ausgewählte Schrift überhaupt für das Internet nutzen darf. Kann einem eine Menge Ärger ersparen und man fällt keinem gierigen Abmahnanwalt in die die Hände.
2. @font-face
Hiermit werden die Schriftdateien eingebunden und mit einem Namen versehen.
/* IE 6-8 */
@font-face {
font-family: "Comic Sans MS Fett";
src: url('comicbd.eot');
}
/* Der Rest (mit den üblichen Einschränkungen) */
@font-face {
font-family: "Comic Sans MS Fett";
src: url('comicbd.woff'),
url('comicbd.otf'),
url('comicbd.ttf');
}
Wichtig!
In das src
kommt der Pfad zur Schriftdatei, relativ von der CSS-Datei aus. Will man bei modernen Browsern mehrere Varianten nehmen, so trennt man sie
einfach durch ein Komma. Und der Name gehört in die font-family
-Eigenschaft. Ach ja, welchen Namen ihr vergebt, ist völlig lattens. Man kann auch
font-family: blubb;
schreiben und die Sache funktioniert trotzdem. Es gibt da noch ein paar Feinheiten, aber auf die gehe ich gleich ein.
Ein wichtiger Hinweis!!!
Sollte man dazu gezwungen sein, den IE8 und abwärts zu unterstützen, so muss immer(!) erst der Verweis auf die .eot
-Datei kommen.
3. Ansteuerung
Das erfolgt dann wie gehabt. In diesem Beispiel verwenden wir unsere Spezialschrift also nur für Überschriften.
* {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
/* Wenn ihr die bei font-family wirklich blubb genannt habt */
font-family: blubb;
}
4. Formatierungen
Im Gegensatz zu den Standardschriften muss man in diesem Fall auf eine wichtige Sache achten. Es muss nämlich der entsprechende
Schriftschnitt verfügbar sein. Wenn ihr also zum Beispiel eine Schrift habt, die nur aus Großbuchstaben besteht, so ist ein
text-transform: lowercase
völlig zwecklos. Notfalls müssen dann alle möglichen Schriftschnitte eingebunden werden.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt