HTML-Tutorial

Details
Zuletzt aktualisiert am Sonntag, 01. Juli 2012 08:11
Geschrieben von Jan Pionzewski
Seite 6 von 10

 

5. Schrift-Formatierung

Schriftart und Schriftgröße lassen sich in HTML natürlich auch verändern. Doch müssen Sie bei Schriftarten aufpassen, denn bei Ihrem Besucher werden nur die Schriftarten angezeigt, die er auch auf seinem Rechner installiert hat. Wenn Sie also eine exotische Schriftart verwenden, die Ihr Besucher nicht installiert hat, wird bei ihm automatisch die voreingestellte Standard-Schriftart angezeigt (auf Windows-Rechnern meist Times New Roman). Daher sollten Sie versuchen, die eingesetzten Schriftarten auf die Standard-Schriftarten zu beschränken, die jeder installiert auf. Auf den meisten Windows-Rechnern ist das:

 

  • Arial
  • Courier New
  • Tahoma
  • Times New Roman
  • Verdana

 

Hinweis:
Die Schrift-Formatierungen werden dabei im CSS-Format angegeben, da der alte HTML-Gebrauch (z.B. <font face="Verdana" anstelle von <span style="font:family:Verdana">) inzwischen als deprecated gekennzeichnet wurde. Das heißt, dass diese alten HTML-Angaben in Zukunft aus dem HTML-Standard entfallen sollen. Dieses Tutorial wird sich daher, obwohl es eigentlich ein HTML-Tutorial ist, an diesen Angaben orientieren und die Schrift-Formatierung im CSS-Format erklären.


5.1 Schriftarten

Und so können sie Schriftarten auf Ihren Seiten definieren:

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<p>
  <span style="font-family:Verdana">Schrift in Verdana</span><br>
  <span style="font-family:Exotisch01,Verdana">Dieser Text wird in Exotisch01 dargestellt. Wenn diese Schriftart nicht verfügbar ist, wird hingegen Verdana genommen</span>
</p>

</body>
</html>


Bedenken Sie, dass die angegebene Schriftart so lange weiter benutzt wird, bis der <span>-Tag wieder geschlossen wird (dies gilt im Übrigen ja sowieso für jeden HTML-Tag).


5.2 Schriftgröße

Auch die Schriftgröße lässt sich selbstverständlich verändern.

Beispiel:

<html>
<head>
  <title>Schriftart, Schriftgr&ouml;&szlig;e und Schriftfarbe - CSS-Entsprechungen</title>
</head>
<body>

<p>
   <span style="font-size:250%">Sehr großer Text</span><br>
   <span style="font-size:50%">Sehr kleiner Text</span><br>
   <span style="font-size:1.2em">Text etwas größer als normal</span><br>
   <span style="font-size:1em">Standardgröße, wie sie beim Benutzer eingestellt ist</span><br>
   <span style="font-size:0.8em">Text deutlich kleiner als normal</span>
</p>

</body>
</html>


5.3 Schriftfarbe

Die Farbe des Textes lässt sich natürlich ebenso verändern, wie auch die Größe und Schriftart.

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<p>
  <span style="color:#FF0000">Knallroter Text</span><br>
  <span style="color:#00C000">Grüner Text</span><br>
  <span style="color:#0000FF">Blauer Text</span><br>
  <span style="color:lightblue">Hellblauer Text</span><br>
  <span style="color:pink">Pinker Text</span><br>
  <span style="color:darkred">Dunkelroter Text</span>
</p>

</body>
</html>


Wie Sie sehen, können dabei die Angaben zur Farbe sowohl als Hexadezimal-Wert, als auch als englischer Begriff angegeben werden.


Kommentar schreiben

Sicherheitscode
Aktualisieren