Okt 2009

CSS-Tutorial – Per CSS Schriftarten ändern

Heute möchte ich Euch zeigen, wie man per CSS die Schriftart eines Textes ändern kann.

Hierzu verwendet man den CSS Befehl font-family.

Ähnlich dem font face in HTML sollte man bei font-family mehrere Schriftarten angeben, da man nicht weiß, welche Fonts (Schriftarten) auf dem Rechner des Besuchers installiert sind. Man bedenke, daß der Besucher bspw. auch mit einem Linux-System auf Eure Seite kommen könnte.

Beispielcode HTML:

<html>
 <head>
  <style type="text/css">
   #arialtext { font-family:"arial black", arial, "times new roman"; }
  </style>
 </head>
 <body>
   Von diesem Text möchte ich folgende Passage in Arial Black anzeigen:<br>
   <span id="arialtext">Dieser Text sollte in Arial black dargestellt werden, sofern es auf dem Zielrechner installiert ist.</span>
 </body>
</html>

Wie Ihr sehen könnt, werden die weiteren Schriftarten (die zum Einsatz kommen sollen, sofern die vorher aufgezählte nicht vorhanden ist) einfach mit Kommas getrennt aufgezählt.

Arial Black und Times New Roman habe ich in Anführungszeichen gesetzt. Die W3C sieht vor, daß Namen von Schriftarten, die Leerzeichen beinhalten, in Anführungszeichen gesetzt werden. Es wird zwar ohne Anführungszeichen nicht als Fehler bemängelt, allerdings wird man darauf hingewiesen.

Share and Enjoy: Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.