Vorschau

Typo Webfonts verwenden

Hier steht eine Headline

HTML

copy

CSS

copy

Notizen

Browser: Safari, IE 6-9, IE 9 Compatibility Modes, Firefox, Chrome, iOS, Android, Opera

Fonts generieren: http://www.fontsquirrel.com/fontface/generator

Quellen / Infos:

http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

http://www.fontsquirrel.com/fonts/Komika-Axis

======

text-rendering: optimizeLegibility; aktiviert das Kerning und sofern vorhanden auch die Ligaturen der verwendeten Schrift. Die Eigenschaft eignet sich am besten für größere Headlines. Um lange Ladezeiten zu vermeiden sollte man diese Eigenschaft nicht auf alle Texte anwenden. Ergänzend möchte ich noch erwähnen, das die “Komika-Axis” nicht unbedingt die beste Wahl ist, um diese Optimierung zu testen. Starte am besten selbst einen Versuch mit einer “klaren” Typo.

Weitere Werte für die Eigenschaft text-rendering sind übrigens: auto, optimizeSpeed und geometricPrecision.

(zur Zeit nur Gecko- und Webkit-Browser)