Hauptmenü

Untermenü

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:

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";
  srcurl('comicbd.eot'); 
}
/* Der Rest (mit den üblichen Einschränkungen) */
@font-face {
  font-family"Comic Sans MS Fett";
  srcurl('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-familyVerdanaArialHelveticasans-serif;
}
h1h2h3h4h5h6 {
  /* Wenn ihr die bei font-family wirklich blubb genannt habt */
  font-familyblubb;
}

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