Meine neuste Faszination sind die neumodischen typografischen Möglichkeiten die sich aus den HTML5-Hacks cufón oder typeface.js via Javascript/Canvas und schließlich der CSS-Technik @font-face ergeben. Endlich keine umständlichen Image-Replacement-Hacks mehr!
Eine Revolution in der Typografie für Web-Design kündigt sich an, die bereits kommerziell verwertet wird – zum Beispiel vom Schriftenhaus Fontshop via Typekit als gehostete DRM-Lösung. Meine leise Kritik daran habe ich bereits in den Kommentaren eines Videos mit Erik Spiekermann hinterlassen. [s. auch]
Gerrit von praegnanz.de hat vor ein paar Tagen begonnen Typekit einzusetzen und ist auf einige Probleme mit Nutzern von WIndows und Linux gestoßen.
Ich habe jetzt hier in diesem Blog angefangen @font-face zu verwenden. Aktuell benutze ich einen kostenlos erhältlichen Schnitt der Schrift Zag von Fontfabric für Überschriften und in der Seitenleiste, da dies vorbildlicherweise in der EULA der Schrift erlaubt ist.
Daher würde mich interessieren, ob die Überschrift dieses Artikels in eurem Browser so aussieht:
Falls nicht, freue ich mich über einen Kommentar, der den Unterschied erklärt und am schönsten wäre ein Screenshot, der den Unterschied zeigt. Bitte nennt auch Browser, Version und Betriebssystem – Bei Windows© bitte angeben, ob ClearType® aktiviert ist. Danke!
Mehr Quellen zur weiteren Recherche zum Thema: @font (Tobias Otte) bei Twitter, das Working Draft des W3C, nicewebtype.com, fontembedding.com, Paul Irish, FontSquirrel Generator.
2009-12-20 16:10
sag DU doch mal bitte, ob das bei dir auch so aussieht, wie bei mir: http://kosmar.de/archives/2009/12/20/font-face/ @font-face #webfonts
2009-12-20 17:16
Ja.
(safari / Snow Leopard)
2009-12-20 17:20
Das Kerning könnte allerdings besser sein. Sieht etwas fleckig aus. Liegt aber vermutlich an der Schrift und nicht an fontface/Cufon.
2009-12-20 17:24
Nein.
http://twitpic.com/ucql2
(Vista/Chrome)
2009-12-20 17:24
Nein: Chrome/PC – Arial, ca. 14px
Nein: IE8/PC – Arial, ca 18px
Nein: FF3.0.14/PC – Arial, ca 18px
2009-12-20 17:25
@schoschie welcher browser/betriebsystem? (cufón nutze ich hier nicht, nur plain @font-face) – ist es identisch zu meinem screenshot, oder anders? – klar das kerning des fonts ist per se sicher nicht perfekt.
@jens danke, das ist doch mal ne schöne degradation … sicher keine segoe bei dir (hast du xp, oder?)
2009-12-20 17:26
und lustigerweise bei allen dreien ohne Kantenglättung.
2009-12-20 17:26
@jens, @heiner cleartype ansonsten aktiviert im windows selbst? mit cleartype gibt es nämlich folgendes problem http://is.gd/5uSUh und die lösung http://bit.ly/6PUm1T
2009-12-20 17:31
ja:
snow leo / chrome 4.0.249.43
snow leo / firefox 3.5.6
ich hab bei mir ein template im einsatz, das das irgendwie mit flash-zaubert. funktioniert aber auch nur unter mac und reisst die geschwindigkeit des seitenaufbaus logischerweise tief in den keller.
2009-12-20 17:31
jep, der rest ist sauber antialiased :)
2009-12-20 17:36
@andreas ja das ist wohl sIFR – das quasi beste, aber flashbasierte image-replacement http://meiert.com/de/publications/articles/20050513/#toc-sifr – im prinzip wie cufón, nur eben flash statt canvas, und daher prozessorbelastender. sollte aber auch außerhalb mac klappen …
2009-12-20 17:39
Wenn bei allcreatives dasselbe Plugin für die Customfonts im Einsatz ist funktionierts dort übrigens. Bei Dir aber immer noch nicht.
2009-12-20 17:39
Ja tut sie in FF 3.5.6
2009-12-20 17:41
@jens ah, check ich mal – ich hab hier kein plugin, das ist von hand gestrickt, sind ja nur drei zeilen … :)
ah, ja ich hatte es im header der html, und nicht im .css selbst – hab das mal geändert, ändert das was bei dir?
2009-12-20 17:51
Unter Snow Leopard im #mbp ist alles schau. Windows siehe http://yfrog.com/austsg
2009-12-20 17:57
Hier ein Screenshot: http://www.twitpic.com/ucvva
Durch Deine Änderung hat sich das aber leider trotzdem nicht verschönert.
LG
2009-12-20 18:13
Ist identisch zum Screenshot, ja. Safari 4.0.4/OS X.6.2
2009-12-20 18:58
http://dl.dropbox.com/u/3232698/font-face-renderings.png, das verwendete Windows hat Clearscheiß aktiviert
2009-12-20 19:09
Sieht genauso aus wie in der Grafik. In Firefox 3.5.6 und Arora 0.10.1 unter Kubuntu 9.10. Mit Arora (Webkit) dauert es aber einige Sekunden, bis die Überschrift erscheint (core2 Duo Prozessor)
2009-12-20 19:28
Bin etwas verwirrt. Soll ClearType jetzt an sein, oder aus? Ich kenne Schriften (egal welche) sowohl in IE, als auch in FF schon immer so pixelig und ich habe ClearType immer an. Nutze Vista.
IE8 zeigt bei mir übrigens Arial (in hässlich natürlich).
2009-12-20 19:43
keine Veränderung hier.
2009-12-20 20:00
FF 3.5.6
http://img.ly/i1q
Chr 3.0.195.38
http://img.ly/i1r
IE 8.0.7600.16385 64Bit
http://img.ly/i1s
Win7 64Bit
Clear Type aktiviert
2009-12-20 20:17
@jason betr. cleartype:
nunja, prinzipiell rate ich natürlich cleartype tunlichst zu aktivieren.
allerdings hat cleartype offensichtlich den bug, das die per @font-face eingebundene schrift, die schon optimal dargestellt wird (auch ohne cleartype) durch cleartype nochmal kaputtoptimiert wird in der darstellung, meint dass cleartype nicht weiß, das @font-face bereits anti-aliasing beinhaltet und das dann nochmals drüber anti-aliased, was wohl effektiv dazuführt, dass da eine zu starke scharfzeichnung der ränder stattfindet. s. z.B. bei http://dl.dropbox.com/u/3232698/font-face-renderings.png
das problem ist bekannt: http://is.gd/5uSUh und die lösung http://bit.ly/6PUm1T per jquery auch, aber dazu hatte ich noch keine lust, bzw finde ich es auch fast überzogen dafür extra die doch riesige jquery lib laden zu lassen.
betr: ie
ja, microsoft kocht da wieder eine eigene suppe und man müßte den font erstmal an einem windows-rechner mit speziellem tool namens WEFT in ein
EOF-format (toller name!)EOT umwandeln – dazu fehlte bislang zeit, lust und gelegenheit meinerseits. vielleicht 2011 oder ’12 dann …[Update] siehe auch was gerrit sagt: http://praegnanz.de/weblog/originell-ein-microsoft-rant
2009-12-20 20:36
Ich verstehe. Danke für die Aufklärung.
2009-12-20 20:52
mac / chrome ist alles bestens. Allerdings habe ich nicht richtig verstanden was wann wo bei wem geht oder nicht.
Eine Zusammenstellung wäre klasse :-)
2009-12-20 22:23
Das Format heißt aber nicht EOF, sondern EOT für “Embedded Open Type”, oder?
2009-12-20 23:48
Ja.
Opera 10.10/Linux
Firefox 3.5.5/Linux
2009-12-21 00:34
@tim nuja, die liste crowdsourcete ich hier ja gerade … ;)
@gerrit, du hast völlig recht, EOT stimmt – hatte mich schon gewundert, das mir die eof-koinzidenz bisher nicht aufgefallen war – wobei eot im grunde auch lustig ist … ;)
2009-12-21 01:12
… dass bei manchen browsern ein –> vor der headline stand, lag an einer kombination aus: von mir gesetztem html-kommentar, der intoleranz von opera und ie8 gegenüber leuten die php oder html nicht vollständig können und meiner eigenschaft php nicht vollständig zu können. hab’s korrigiert. danke.
2009-12-21 02:46
habe jetzt den http://www.fontsquirrel.com/fontface/generator benutzt … damit sollte es in noch mehr browsern funktionieren. #hoffnung. demnächst teste ich weitere fonts – das mangelhafte kerning des fonts, bzw die generelle ignoranz von mac gegenüber dem hinting eines webfonts ist schon recht traurig.
danke erstmal für eure zahlreiche hilfe!
2009-12-22 11:02
Funktioniert jetzt. Chrome und FF sauber, Im IE7 (bin auffer Arbeit, da gibts die 8 noch nicht) bissel mehr Treppchen, aber nicht völlig ohne Antialiasing.
2010-01-27 12:27
[…] ist diese Neuerung, da sich im Zuge von HTML5, der aktuellen Diskussion um das wieder entdeckte @font-face, Schriftarten-Services wie typekit usw., die Webdesigner dieser Welt sich nicht mehr mit den so […]