TheGeek.de » typeface http://thegeek.de WordPress, PHP, JavaScript, Web 2.0, Gaming, Motorräder, Fotografie, Piratenpartei, Privates Tue, 09 Mar 2010 16:09:05 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Empfehlung: typeface.js – TTF und OTF Schriften im Browser verwenden http://thegeek.de/empfehlung-typeface-js-ttf-und-otf-schriften-im-browser-verwenden http://thegeek.de/empfehlung-typeface-js-ttf-und-otf-schriften-im-browser-verwenden#comments Tue, 29 Dec 2009 17:49:23 +0000 Marc http://thegeek.de/?p=437 Ich habe die letzten zwei Tage für ein Kundenprojekt ein Screendesign in XHTML und CSS umgesetzt. Wichtiger Wunsch des Kunden war dabei, dass die extra für den Kunden entworfene Hausschrift Verwendung in der Webseite findet. Und das nicht zu knapp: Überschriften und vorallem das Menü sollte in der Schriftart “RKM Headline” ausgegeben werden.

Um TrueType/OpenType Schriften in eine Webseite zu integrieren, gibt es verschiedene Möglichkeiten. Einmal wäre da sIFR, was ich aber nicht verwenden wollte, da ich Flash eher mit Abneigung gegenüberstehe und es zudem Probleme mit AdBlockern geben kann. Die nächste Möglichkeit wäre gewesen, es mit CSS3 zu lösen, was aber ebenfalls ausschied, da dies von zu wenig Browsern unterstützt wird.

Nach ein wenig Recherche fand ich allerdings eine mir zusagende Lösung: typeface.js – ein kleines JavaScript, dass mittels SVG/VML die als TTF oder OTF gelieferte Schriftart im Browser verfügbar macht.

Der Einsatz ist relativ einfach: Auf der Webseite von typeface können beliebige Schriften (TTF/OTF) in JavaScript Dateien konvertiert werden, die zusammen mit der typeface.js im Header der Seite nach den eigenen CSS-Definitionen eingebunden werden.

Hier ein Beispiel:

<head>
	<title>Beispiel</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" href="style.css" media="screen"/>
	<script type="text/javascript" src="js/typeface-0.14.js"></script>
	<script type="text/javascript" src="js/rkm_headline_regular.typeface.js"></script>
	<script type="text/javascript" src="js/rkm_headline_bold.typeface.js"></script>
</head>

Anhand dieses HTML-Codes wird ein wichtiges Detail bereits deutlich: Jede Schriftvariante (Fett/Kursiv/…) muss gesondert in eine JavaScript Datei konvertiert werden, denn nur so ist es typeface möglich auch CSS-Angaben wie “font-weight: bold” richtig zu interpretieren. Fehlt die Fettschriftvariante der Schriftart, wird der Text nicht umgewandelt. Ein kleiner Stolperstein, aber wer es weiß, für den ist es kein Problem.

Ansonsten ist der weitere Einsatz von typeface einfach: Headline-Tags können per Stylesheet formatiert werden, bei anderen Tags muss eine Style-Angabe im Tag direkt gesetzt sein, Kind-Elemente werden nicht beachtet.

Beispieldefinition eines Headline-Tags:

#middle h2 {
	font-size:20px;
	font-weight:normal;
	text-transform:uppercase;
	letter-spacing:1px;
	margin-bottom:18px;
	font-family:'RKM Headline',Arial,Helvetica,sans-serif;
	font-weight:bold;
}

Der Tag wird erstmal wie gewöhnlich formatiert, so dass die Überschrift auch schön aussieht, wenn typeface nicht funktioniert. Dann wird per “font-family” einfach unsere selbst erzeugte Schriftart “RKM Headline” gesetzt, um den Rest kümmert sich das JavaScript.

Möchtest du ein anderes Element als eine Headline mit der Schriftart anzeigen, kann dies auch über das Style-Attribut des Tags gelöst werden:

	<a class="typeface-js" style="font-family: 'RKM Headline',Arial,Helvetica,sans-serif;">Dies ist ein schöner Link</a>
	<br/>
	<br/>
	<a class="extern_link typeface-js" style="font-family: 'RKM Headline',Arial,Helvetica,sans-serif;">Dies ist ein schöner externer Link</a>

Hier nur wichtig: Im Class-Attribut des Tags muss “typeface-js” vorkommen, der Rest läuft über das Style-Attribut, aber auch die CSS-Attribute – wie z.B. die Schriftgröße – die auf das Element wirken werden berücksichtigt.

Schon klasse muss ich sagen… und OpenSource noch dazu! Daumen hoch für typeface!

]]> http://thegeek.de/empfehlung-typeface-js-ttf-und-otf-schriften-im-browser-verwenden/feed 1