Advanced CSS - Serverseitige Schriften
1. Ein paar Hinweise vorab
Der Internet Explorer kommt bis einschließlich Version 8 nur mit dem proprietären Microsoft-Format Embedded OpenType (EOT) klar. Für die anderen Browser nimmt man TrueType- oder OpenType-Schriften. Einen schönen Konverter von TTF in EOT findet ihr übrigens hier. Außerdem müsst ihr unbedingt darauf achten, dass ihr gegen keine Lizenzbestimmungen verstoßt.
2. @font-face
Hiermit werden die Schriftdateien eingebunden und mit einem Namen versehen.
/* IE 6-8(9) */
@font-face {
font-family: "Comic Sans MS Fett";
src: url("comicbd.eot")
}
/* Der Rest */
@font-face {
font-family: "Comic Sans MS Fett";
src: url("comicbd.ttf")
}
Wichtig!
In das src kommt der Pfad zur Schriftdatei. Relativ von der CSS-Datei aus. 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.
Ach ja
Man findet im Internet immer wieder Hinweise darauf, dass man hier gefälligst mit Conditional Comments arbeiten sollte. Meiner Meinung ist das ziemlich überzogen. Wenn die Browser mit dem Schrifttyp nicht klarkommen, wird die entsprechende Anweisung einfach ignoriert. Da der Internet Explorer 9 beide Varianten beherrscht, könnte man meinen, dass das zu Problemen führt. Tut es aber nicht, hab ich ausprobiert.
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-face 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.
5. Obacht!
Diese serverseitigen Schriften sind kein Allheilmittel! Denn je nach Betriebssystem und/oder Browser kann es zu gewaltigen Unterschieden bei der Darstellung kommen. Entscheidend ist der Maßstab, den man anlegt. Wenn man zum Beispiel von Windows XP ausgeht, so tanzen Mac OSX und Windows 7 gewaltig aus der Reihe. Und der Safari stellt auf allen Systemen ein Ärgernis dar. Wenn ihr also mit dieser Technik arbeitet, so solltet ihr das vorher(!) genau testen. Und zwar mit allen gängigen Browsern auf allen gängigen Betriebssystemen.