Advanced CSS - Serverseitige Schriften - Feinheiten

1. Lokale Schriften einbinden

Wenn man eine ziemlich populäre Schrift wie zum Beispiel die Georgia einsetzt, so kann man davon ausgehen, dass die auf vielen Rechnern schon installiert ist. In dem Fall muss man also nur diejenigen serverseitig bedienen, bei denen das nicht der Fall ist. Um aber nun der ersten Gruppe den download zu ersparen, kann man so vorgehen.

@font-face {
  font-family: 'Georgia';
  src: local('Georgia'), 
       url('fonts/Georgia.woff');
}

Sollte also die Georgia bereits installiert sein, so wird sie aus dem lokalen System genommen, ansonsten greift die serverseitige Variante. Praktisch, gelle?

Aber!

Man muss hierbei auf drei wichtige Dinge achten.

Der Name

Hier kann man nicht auf eine Eigenbezeichnung à la blubb oder sonst was zurückgreifen, sondern muss den Originalnamen verwenden.

Der Schriftschnitt

Auch wenn die clientseitige Schrift denselben Namen hat wie die serverseitige, so kann es doch zu erheblichen Darstellungsunterschieden kommen. Im Notfall greift man dann auf eine rein serverseitige Variante zurück. Dazu gleich mehr.

Macs

Auf solchen Kisten kann man bei lokalen Schriften so weit ich weiß nur PostScript-Schriften verwenden, wenn man den Safari nutzt. Getestet habe ich das aber nicht, da ich so einen Rechner mein Eigen nicht nenne. Wer mich eines Besseren belehren kann, schicke mir einfach eine Mail.

2. Lokale Schriften nicht einbinden

Ehrlich gesagt weiß ich nicht, was mit der folgenden Vorgehensweise bezweckt werden soll. Aber angeblich benötigt man es in bestimmten Situationen, die ich an meinem Rechner nicht nachvollziehen kann. Offenbar scheint es vorzukommen, dass "aus Versehen" Schriften vom lokalen System gezogen werden. Und wenn man auf dem Mac mit Schriftverwaltungssoftware arbeitet, kann es wohl zu Problemen kommen, wenn die nicht dem dafür vorgesehenen Standardordner liegen.

Nun denn

Um auf Nummer sicher zu gehen, arbeitet man mit der folgenden Anweisung.

@font-face {
  font-family: 'Gergia';
  src: local('Ø'), 
       url('fonts/Gergia.woff');
}

Indem man ein komisches Zeichen bei local eingibt, kann man die oben beschriebenen Probleme umgehen. Manche empfehlen anstelle des durchgestrichenen O auch ein UTF8-kodiertes Smile-Zeichen.

3. 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.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt