In den letzten Tagen konnte ich mich ein wenig mit der Problematik der Custom-Schriften auf Webseiten auseinandersetzen.
Zuerst informierte ich mich über @font-face, verwarf den Gedanken wegen der noch zu geringen Verbreitung aber gleich wieder.
Mein zweiter Anlaufpunkt führte mich dann relativ schnell zu sIFR3. Sah schön aus, ließ sich leicht integrieren und gut anpassen. Doch der Teufel steckte im Detail. Gerade wenn man eine verlinkte Headline mit sIFR bestücken will verliert dieses Script seinen Charm. Der Link ist eben ein Flash-Link, und lässt sich demnach nicht intuitiv mit den vom Browser gegebenen Funktionen nutzen. Besonders störend war z.B. das sich der Link nicht in neuen Tabs öffnen ließ. Ich klicke in Firefox gerne mit dem Mausrad auf Links, was den Link direkt in einem neuem Tab öffnet. Mit siFR passierte hier leider gar nichts. Auch unangenehm wann dazu noch die Dateigröße von insgesamt knapp 80Kb inkl. Font-File und die Abhängigkeit von aktiviertem JavaScript und Flash.
Bei Wirgestalter wurde ich dann jedoch auf P+C DTR aufmerksam. P+C DTR ist ein kleines PHP-Script das die gewünschten Texte serverseitig in der gewünschten Schriftart als PNG8 generiert. Das alleine ist ja nun nicht der Brüller, das beste ist jedoch, das die Konfiguration durch eine ganz gewöhnliche CSS-Datei geschieht, die im Anschluss von dem PHP-Script interpretiert wird. Das Script erstellt zudem nicht nur die Grafiken, sondern kapselt die per CSS selektierten Texte auch gleich in gestückelte Spans und klatscht die generierten Grafiken als background-image in die jeweiligen Spans, alles voll automatisch, performant und serverseitig. Dazu wird über ein weiteres PHP-Script eine zweite dynamische CSS-Datei generiert.
Die Script versteht sich aktuell mit folgenden CSS-Eigenschaften:
- font-family
- font-size (in points)
- color
- background-color
- a:hover
- text-decoration: underline
- text-transform: uppercase/lowercase
- text-align
Damit der Server nicht ständig am rotieren ist hat das Script auch einen integrierten Cache-Mechanismus, so werden die generierten Grafiken gleich Physisch gespeichert. Für die :hover-Pseudoklasse werden übrigens keine eigenen Grafiken erzeugt. Das Script ist so schlau und packt alles in eine Datei und löst das ganze automatisch über CSS-Sprites.
In meinem aktuellem Projekt viel daher meine Wahl auf P+C DTR. Denn als Vorteile wären da zusammenfassend zu nennen:
- Je nach Menge der Überschriften relativ geringes Ladevolumen
- Konfiguration über ganz normales CSS
- Dadurch resultiert eine enorme Flexibilität für den Designer
- Man geht der Lizenzfrage für die Schriftart aus dem Weg, da diese intern auf dem Server versteckt werden kann.
- Schrift-Dateien müssen nicht erst mühselig umgewandelt werden.
- Für Suchmaschinen und Non-CSS-User bleibt der Text weiterhin indexierbar/lesbar
- Zeilenumbrüche problemlos möglich
- IE6 kompatibel
- Kinderleicht einzurichten, keine Programmierkenntnisse erforderlich
- Funktioniert auch in zusammenarbeit mit den meisten CMSen wunderbar
- Elemente können einfach via CSS-Selektoren angesprochen werden
- Keine Abhängigkeit von aktiviertem JavaScript oder gar Flash
- Links lassen sich mit nativen Browserfunktionen nutzen (Bookmark, Copy, New Window)
Aber wie jede der aktuellen Font-Replacements gibt es auch hier ein paar Nachteile:
- Wer Grafiken deaktiviert hat sieht erstmal nichts, obwohl man das mit etwas besserem CSS wohl auch hinbekommen könnte.
- Erzeugt relativ viele HTTP-Requests
- Der Text lässt sich natürlich immernoch nicht selektieren
- Keine komplette Unterstützung aller Schriftanpassungen, z.B. fehlendes
font-weight(ließe sich wohl über eine separate Font-Datei lösen) oderletter-spacing(line-height lässt sich aber über negativ-margings simulieren).
Für mich stellt dieses Script aktuell die beste Alternative zur Nutzung von Custom-Schriften im Web dar. Für mein Lieblings-CMS Textpattern gibt es sogar schon ein kleines Plugin was das einbinden des Scripts vollkommen automatisiert.
Probierts einfach mal aus, ich für meinen Teil war sehr begeistert!
Kommentare zum Thema P+C DTR - das bessere sIFR?:
Hallo Oliver,
für Suchmaschinen sollte sich eigentlich nichts ändern, der Text bleibt ja im Quellcode unverändert, bis auf das die einzelnen Wörter eben in <span> gewrappt werden, was aber keinen Einfluss auf die Indexierbarkeit haben sollte. Der eigentliche Text wird zwar über CSS ausgeblendet, afaik bekommt Google das aber nicht mit, und selbst wenn ist es ein legitimer Weg grafische Texte indexierbar zu machen.
Aber noch eine Info: <h1> haben schon seit geraumer Zeit keinen wirklich Trust beim Ranking mehr.
leider bin ich mit den neuen versionen alles andere als zufrieden. als pcdtr noch weniger features hatte, funktionierte wenigstens das, was es konnte. mit der aktuellen version habe ich mehrere probleme feststellen können:
- verschachtelte selektoren funktionieren nur bedingt
- überschriften auf verschiedenen hintergrundfarben mittels transparentem hintergrund werden kantig, da keine glättung stattfindet
- <br /> tags innerhalb der headline werden vom script versucht mit <br/> zu schliessen
aus diesen gründen verwende ich zurzeit sifr3, was mir alles in allem «runder» daherkommt.
Hi andi,
naja… sagen wir so, es ist immer die Frage wo man es einsetzen will. Bei unserer Seite hat P+C DTR am besten unsere Bedürfnisse befriedigt. Verschachtelte Selektoren… ist sone Sache, ich hab bisher nur #content h2 benutzen müssen, und das hat zumindest reibungslos funktioniert… viel mehr brauchen die meisten wohl auch meist nicht.
Das mit den <br /> Tags ist natürlich mies, hast du den Autor darüber mal informiert?
sIFR ist für mich halt irgendwie ein Fremdkörper auf der Webseite, man macht sich zu abhängig von JS und Flash und auf älteren Rechnern merkt man das verzögerte Rendering spürbar. Für mich ist es immer die Frage wo ich die wenigsten Kompromisse eingehen muss, und das war in dem aktuellen Fall eindeutig pcdtr.
Interessant, da hat sich ja einiges getan, seit ich die Urversion mal in meinem Blog aufgelistet habe. Danke für den aktuellen Link zur (neuen) Projektseite. Ein Nachteil sollte nicht unerwähnt bleiben: Es funktioniert m. W. nur mit TrueType-Schriften – PostScript ist in ImageMagick und GD-Lib nicht vorgesehen, oder liege ich da falsch?
@christian: ja, den autor habe ich kontaktiert. ich habe mit ihm schon des öfteren dabei geholfen, bugs auszumerzen und zu testen. leider hat er sich seit längerem nicht mehr gemeldet
@gerrit du liegst vollkommen richtig. nur truetype-schriften funktionieren. dies hat zur folge, dass viele schriften extra nochmals gekauft werden müssen, sofern mit type1- oder opentype-schriften gearbeitet wird.
@andi Muss man einen Font neu kaufen, wenn man ihn als otf besitzt? Wenn nein, dann gibt es ja die Möglichkeiten diesen in ttf zu konvertieren.
Ich bin der Meinung, wenn man von der Lizenzproblematik einmal absieht, man @font-face gut verwenden kann. Wenn ein Nutzer nicht FF3.1 (bzw.3.5), Safari ab 3, Opera ab 10 oder den IE bis zur Version 7 verwendet, sieht er eben die Wunschschrift nicht.
Zusätzlich kann man ja mit Fontmatrix u.a. noch über verbreitete Schriften auf verschiedenen Systemen informieren, ähnliche Schriften auswählen u.s.w. und mit font-family eine geschickte Auswahl treffen.
Das aber nur für den Moment! Ich denke schon, dass sich die Browserhersteller am ACID3 orientieren. Dieser sieht ja die Einbundung einer ttf-Schriftart über font-face vor. Nur deshalb hat es 10 Jahre nachdem MS die eot’s eingeführt hat, dort überhaupt noch mal Bewegung gegeben.
Kommentar-Feed für diesen Artikel
Kommentarfunktion für diesen Artikel geschlossen.
10 Tipps zum Lösen von IE6-Problemen Über 75 gesammelte Free-Fonts
Es gibt auch für Typolight schon ein Plugin das super funktioniert: http://www.typolight.org/extension-list/view/image_headline.50005.en.html. Was mir besonders gut gefällt sind die funktionierenden Zeilenumbrücke bei langen Headlines. Für mich stellt sich nur die Frage, wie suchmaschinentauglich die für eine Seite wichtigen H1 headlines sind. Hat damit schon jemand Erfahrungen sammeln können?