Guru 2.0 › 3.0

Bis jetzt haben wir als webDesigner ja immer nur mit den Standardschriften arbeiten können. Das heißt alle Schriften, welche auf dem Anwendercomputer installiert sind können wir verwenden. Aber da wir ja alle Systeme von den verschiedenen Windows und Office Versionen über Mac OS X bis zu Linux alles berücksichtigen müssen, war die Auswahl sehr klein. Eine Times, eine Helvetica und schon ist es eigentlich vorbei mit der Typographie.

Natürlich gab es schon mal in CSS 2 die Möglichkeit Schriften einzubinden, aber diese wurde, laut W3C [EN], wegen mangelnder Unterstützung in CSS 2.1 wieder aufgegeben. Jetzt ist sie in CSS 3 wieder eingebaut worden. Aber wie klappt das ganze eigentlich? Und wie schaut das mit dem Urheberrecht aus?

Technik

Die Technik an sich ist eigentlich ganz einfach. Du stellst einen Font auf einer URL zur Verfügung und verwendest ihn dann. Dafür gibt es verschiedene Tools wie:

• GlyphGate [EN] (früher Fairy)
  eine kostenpflichtige webServer-Extension.
• Microsoft WEFT [EN] (Web Embedding Font Tools)
  Software zum Umwandeln von Schriften für das Web
• SIL International [EN]
  Techniken zur Erzeugung von Schriften und verschiedene Ressourcen

Cascading Style Sheets

Dieser Teil ist eigentlich relativ einfach, aber wird noch nicht von allen Browsern unterstützt. Zuerst musst Du eine Schrift auf Deinen webServer hochladen. Du musst ein wenig mit der Art aufpassen, dass die Schrift auch von jedem System erkannt wird. Sehr gut eigenen sich TrueType-Fonts (*.ttf), da sie eigentlich von jedem Betriebssystem angezeigt werden können. Falls Du ganz sicher gehen willst nimmst Du eine Schrift von SIL oder wandelst mit dem WEFT einen TT-Font um.

Der zweite Schritt besteht im anpassen Deiner css-Datei. Am Anfang fügst Du einen @font-face-Parameter ein.

[css]@font-face {
font-family: Andika;
src: local(AndBasR) url(http://example.com/fonts/AndBasR.ttf);
}[/css]

In der 2. Zeile gibst Du deiner Schrift einen Namen. Diesen kannst Du in der Folge im gesamten css mit dem Attribut font-family verwenden. In der 3. Zeile legst Du fest, woher die Schrift bezogen werden soll. Mit local() kannst Du den Browser anweisen, dass er die lokal installierte Schrift verwenden soll; Natürlich nur wenn sie auch lokal vorhanden ist. Falls dies nicht der Fall ist, kommt der Parameter url() zum Zug. Hier kannst Du eine URL (absolut oder relativ) angeben, von der die Schrift geladen werden soll.

Der dritte Schritt ist dann die Verwendung der Schrift in Deinem css.

[css].entrytitle {
color: #8A8D18;
display: block;
font-family: Andika,"Trebuchet MS",Tahoma,"Lucida Grande",Verdana,Helvetica,Arial,sans-serif;
font-size: 1.6em;
}[/css]

Du siehst in der 4. Zeile wie, die im ersten Beispiel definierte Schrift angewendet wird. In diesem Beispiel habe ich auf darauf Rücksicht genommen, dass noch nicht alle Browser CSS 3 und den @font-face-Eintrag sauber unterstützen. Daher wurden weitere Schriften angegeben. Hier mal eine kleine Auswahl an Browsern und wie sie es unterstützen.

Lizenz & Recht

Hier mußt Du ein wenig aufpassen. Denn auch jede Schrift unterliegt dem Urheberrecht und Du darfst sie nicht einfach weiterkopieren. Daher lies Dir den Lizenzvertrag der Schrift genau durch. Oft ist es untersagt, dass die Schrift auf webSites eingesetzt wird oder öffentlich zur Verfügung gestellt wird. Und genau das machst Du, wenn Du sie auf einem webServer ablegst. Schau einfach mal bei den freien Schriften nach, da findest Du genug, welche verwendbar sind.

ähnliche Posts:

• Webseiten drucken!
• CSS-Generator
• 18 seltene HTML-Tags und ein Attribut die man benützen sollte
• Browser aus dem Web
• 14 Dinge die Du als webDesigner lernst, aber ingorierst

Dieser Eintrag wurde

• am Samstag, 20. Juni 2009 um 12:07 erstellt und wurde unter CSS, Design, Tutorials zum mehr Wissen abgelegt.
• Der Post besitzt diese Tags: css 3, font-face, Schriften, Tutorial
• Du kannst alle Antworten darauf mit dem RSS 2.0 Feed verfolgen.
• Du kannst eine Antwort schreiben.
• Du kannst einen TrackBack von Deinem eigenen Blog setzen.
•  drucken

Der Artikel hat Dir geholfen?

Warum spendierst Du mir nicht einen Kaffee?