Startseite
CSS-Schriftarten  
xgdown Schriftarten
xgdown Schriftgröße
       xgdown Absolute Maßeinheiten
       xgdown Relative Maßeinheiten
xgdown Texteffekte
       xgdown font-style (Schriftstil)
       xgdown font-weight (Schriftgewicht)
       xgdown font-variant (Schriftvariante)
       xgdown font (Schrift allgemein)
       xgdown text-align (horizontale Ausrichtung)
       xgdown vertical-align (vertikale Textausrichtung)
       xgdown text-transform (Texttransformation)
       xgdown text-decoration (Textdekoration)

Feedback     Interesse an einer CD ?    

Schriftarten

font-family font-family heißt wörtlich übersetzt "Schriftfamilie" und bezeichnet die Schriftart, die der Browser zum Anzeigen des zugewiesenen Textabschnitts benutzen soll.

Es können beliebig viele Schriftarten in die Liste aufgenommen werden. Der Browser durchsucht das System nach den angegebenen Schriften und benutzt die erste Schriftart, die im System installiert ist.

Die Angabe mehrerer Schriften wird durch Komma getrennt.

Beispiel: 

p  {font-family:Verdana,Arial,sans-serif;}
li {font-family:"Courier New",monospace;}
<h1 style="font-family:'Comic Sans MS',cursive">

font-family:Verdana,Arial,sans-serif
font-family:'Courier New',monospace
font-family:'Comic Sans MS',cursive

Namen von Schriften, die Leerzeichen enthalten, sind in Anführungszeichen zu setzen. 

In Definitionen: z.B. li {font-family:"Courier New"}
Bei der Schriftangabe innerhalb eines Befehls werden die Schriftangaben in Hochkommas gesetzt. 
In Befehlen: z.B. <h1 style="font-family:'Comic Sans MS'">

Beispiel:
<html>
   <head>
     <title>font-family</title>
     <style type="text/css">
     <!--
         body {font-family:Verdana,Arial,Helvetica,sans-serif;}
         h1   {font-family:monospace;}
  -->
     </style>
   </head>

   <body bgcolor="#f7e9c0">
   <h1>Stylesheets: Schriftangaben</h1>
   <hr noshade size="1">
   <p>h1 {font-family:monospace;}<br>
      Die Überschrift wird in der Schriftart monospace angezeigt.</p>
   <p>body {font-family:Verdana,Arial,Helvetica,sans-serif;}<br>
      Der Text des gesamten Dokuments wird standardmäßig in der Schriftart:
      Verdana dargestellt.</p>
   <ol style="font-family:'Comic Sans MS',cursive">
      <li>&lt;ol style=&quot;font-family:'Comic Sans MS',cursive&quot;&gt;</li>
      <li>Auch geordnete Listen können eine andere Schriftart besitzen.</li>
      <li>In diesem Fall ist es Comic Sans MS.</li>
   </ol>

   </body>

</html>
So sieht das aus

xgdown Codeschnipsel: Schriftart als CSS-Eigenschaft

Schriftgröße

font-size:xEinheit Grundsätzlich sind mit dieser Angabe viele Schriftgrößen möglich.

Die Einheiten der Größenangaben sind:

  • Punkte, Betonung, Pixel
  • Schlüsselwörter, prozentuale Angaben

Beispiel: 

p  {font-size:13px;}
li {font-size:small;}
<h1 style="font-size:20pt">

font-size:13px
font-size:small
font-size:20pt

Stylesheets verstehen verschiedene Arten von Einheiten. Generell gilt, bei allen numerischen Angaben innerhalb von CSS-Sylesheets stehen Ihnen die weit verbreiteten Maßeinheiten zur Verfügung. Dabei sind absolute Angaben (z.B. Millimeter) und relative Angaben (z.B. Prozent) möglich.

Absolute Maßeinheiten

  • px für Pixel
  • mm für Millimeter
  • cm für Zentimeter
  • in für Inch (1 Inch = 2,54 cm)
  • pt für Punkt (1 Punkt = 1/72 in = 0,35 mm)
  • pc für Pica
    • (1 pc = 12pt = 1/6 in = 4,32 mm)
Umrechnungstabelle der absoluten Maßeinheiten
  mm cm in pt pc
1 mm 1 0.1 0.039 2.834 0.236
1 cm 10 1 0.39 28.34 2.36
1 in 25.4 2.54 1 72 6
1 pt 0.35 0.035 0.0139 1 0.083
1 pc 4.23 0.423 0.166 12 1

Bei der Angabe der Maßeinheiten sind Dezimalstellen erlaubt.
Als Dezimalzeichen sollten Sie einen Punkt verwenden.

Gleiche Textgrößen, unterschiedliche Zahlenwerte
Übersicht der verschiedenen Einheiten
Werte 4.23mm 0.423cm 0.166in 12pt 1pc
Text font-size:4.23mm font-size:0.423cm font-size:0.166in font-size:12pt font-size:1pc
Text font-size:4mm font-size:0.423cm font-size:0.1in font-size:11pt font-size:1.1pc

Relative Maßeinheiten

  • em für x - fache Größw des jeweiligen Elementes (1 em = 100%)
  • ex Steht für bezogen auf die Höhe des Kleinbuchstaben x in diesem Element
  • % für Prozent gegenüber der standardmäßigen Größe (100% = 1 em)

Relative Maßeinheiten
Formatierung mit relativen Maßeinheiten
Werte 1.5em 3ex 150%
Text font-size:1.5em font-size:3ex font-size:150%

Weitere Maße
Formatierung mit Schlüsselwörtern
font-size:xx-large Riesiger Text
font-size:x-large Sehr großer Text
font-size:large großer Text
font-size:larger nächsthöchstes Maß
font-size:medium normaler Text
font-size:small kleiner Text
font-size:smaller nächstniedrigeres Maß
font-size:x-small sehr kleiner Text
font-size:xx-small winziger Text

Texteffekte

Schriftstil

Schriftstil bedeutet die Neigung der Schrift

font-style: Mit font-style: können Sie den Schriftstil bestimmen. Folgende Angaben sind möglich: 
   italic   = Schriftstil kursiv.
   oblique = Schriftstil kursiv.
   normal   = normaler Schriftstil.

Beispiel: 

p  {font-style:italic;}
li {font-style:oblique;}
<h1 style="font-style:normal">

font-style:italic
font-style:oblique
font-style:normal

Schriftgewicht

Das Schriftgewicht bezeichnet die Dicke und Stärke einer Schrift.

font-weight: Mit font-weight: können Sie das Schriftgewicht bestimmen. Folgende Angaben sind möglich: 
   bold          = fett.
   bolder     = extra fett.
   lighter   = dünner.
   normal     = normal.
   100 200 300 400 500 600 700 800 900   = (100) extra dünn (900) normal

Beispiel: 

p  {font-weight:bold;}
li {font-weight:500;}
<h1 style="font-weight:normal">

font-weight:500
font-weight:normal
font-weight:100
font-weight:bold
font-weight:600
font-weight:700
font-weight:800
font-weight:900

Bei den numerischen Werten entspricht die Angabe 500 dem im DTP-Bereich üblichen Begriff medium, und die Angabe 700 entspricht dem Begriff bold. Wohl kaum eine installierte Schriftart unterstützt alle erlaubten Angaben zum Schriftgewicht.

Schriftvariante

Als besondere Schriftvariante stehen Kapitälchen (kleine Großbuchstaben) zur Verfügung.

font-variant: Mit font-variant: können Sie die Schriftvariante bestimmen. Folgende Angaben sind möglich: 
   small-caps = Kapitälchen.
   normal           = normale Schriftvariante.

Beispiel: 

p  {font-variant:small-caps;}
li {font-variant:small-caps;}
<h1 style="font-variant:normal">

font-variant:small-caps
font-variant:normal

Schrift allgemein

Diese Eigenschaft ist eine Zusammenfassung der folgenden fakultativen Einzelangaben:

  • font-family
  • font-style
  • font-variant
  • font-size
  • font-weight
  • line-height

font: Mit font: können Sie verschiedene Schriftformatierungen mischen. Erlaubt sind die üblichen Wertangaben zu den erlaubten Eigenschaften, die in font: zusammengefasst sind. Die Reihenfolge der Angaben ist egal.

Beispiel: 

{font:bold 12pt Times;}
{font:italic 1cm Helvetica;}
{font:small-caps 14pt Verdana;}
{font:12pt "Comic Sans MS",Verdana;}
{font:italic normal bold 20pt Verdana,Arial;}
{font:oblique bold 12pt;}


font:bold 12pt Times
font:italic 1cm Helvetica
font:small-caps 14pt Verdana
font:12pt "Comic Sans MS",Verdana
font:italic normal bold 20pt Verdana,Arial
font:oblique bold 12pt

horizontale Ausrichtung

Sie können Textabsätze und andere Blockelemente mit Fließtext, z.B. Tabellenzellen, ausrichten.

text-align: Mit text-align: können Sie gewünschte Elemente für Textinhalte ausrichten. Folgende Angaben sind möglich:
  • left = linksbündig ausrichten (Voreinstellung).
  • center = zentriert ausrichten.
  • right = rechtsbündig ausrichten.
  • justify = als Blocksatz ausrichten.

Beispiel:
<p style="text-align:left; margin-left:1.4cm; margin-right:1.4cm">
Der Absatz, den Sie gerade lesen, wurde mit <b>text-align</b> linksbündig ausgerichtet.
Ferner wurde ein Rand von 1.4cm eingestellt, just for fun oder auch,
damit Sie sehen, wie die einzelnen Style-Sheet-Angaben zusammenspielen.<br>
Noch eine Textzeile<br>
Noch eine Textzeile</p>

Der Absatz, den Sie gerade lesen, wurde mit text-align linksbündig ausgerichtet. Ferner wurde ein Rand von 1.4cm eingestellt, just for fun oder auch, damit Sie sehen, wie die einzelnen Style-Sheet-Angaben zusammenspielen.
Noch eine Textzeile
Noch eine Textzeile

 
<p style="text-align:center; margin-left:1.4cm; margin-right:1.4cm">
Der Absatz, den Sie gerade lesen, wurde mit <b>text-align</b> zentriert ausgerichtet.
Ferner wurde ein Rand von 1.4cm eingestellt, just for fun oder auch,
damit Sie sehen, wie die einzelnen Style-Sheet-Angaben zusammenspielen.<br>
Noch eine Textzeile<br>
Noch eine Textzeile</p>

Der Absatz, den Sie gerade lesen, wurde mit text-align zentriert ausgerichtet. Ferner wurde ein Rand von 1.4cm eingestellt, just for fun oder auch, damit Sie sehen, wie die einzelnen Style-Sheet-Angaben zusammenspielen.
Noch eine Textzeile
Noch eine Textzeile

 
<p style="text-align:right; margin-left:1.4cm; margin-right:1.4cm">
Der Absatz, den Sie gerade lesen, wurde mit <b>text-align</b> rechtsbündig ausgerichtet.
Ferner wurde ein Rand von 1.4cm eingestellt, just for fun oder auch,
damit Sie sehen, wie die einzelnen Style-Sheet-Angaben zusammenspielen.<br>
Noch eine Textzeile<br>
Noch eine Textzeile</p>

Der Absatz, den Sie gerade lesen, wurde mit text-align rechtsbündig ausgerichtet. Ferner wurde ein Rand von 1.4cm eingestellt, just for fun oder auch, damit Sie sehen, wie die einzelnen Style-Sheet-Angaben zusammenspielen.
Noch eine Textzeile
Noch eine Textzeile

 
<p style="text-align:justify; margin-left:1.4cm; margin-right:1.4cm">
Der Absatz, den Sie gerade lesen, wurde mit <b>text-align</b> als Blocksatz ausgerichtet.
Ferner wurde ein Rand von 1.4cm eingestellt, just for fun oder auch,
damit Sie sehen, wie die einzelnen Style-Sheet-Angaben zusammenspielen.<br>
Noch eine Textzeile<br>
Noch eine Textzeile</p>

Der Absatz, den Sie gerade lesen, wurde mit text-align als Blocksatz ausgerichtet. Ferner wurde ein Rand von 1.4cm eingestellt, just for fun oder auch, damit Sie sehen, wie die einzelnen Style-Sheet-Angaben zusammenspielen.
Noch eine Textzeile
Noch eine Textzeile

vertikale Ausrichtung

Sie können zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpsassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile im Verhältnis zueinander ausrichten.

vertical-align: Mit vertical-align: können Sie die vertikale Ausrichtung bestimmen. Folgende Angaben sind möglich:
  • top = obenbündig ausrichten.
  • middle = mittig ausrichten.
  • bottom = untenbündig ausrichten.
  • baseline = an der Basislinie ausrichten (oder untenbündig, wenn es keine Basislinie gibt).
  • sub = tieferstellen (ohne die Schriftgröße zu reduzieren).
  • super = höherstellen (ohne die Schriftgröße zu reduzieren).
  • text-top = am oberen Schriftrand ausrichten.
  • text-bottom = am unteren Schriftrand ausrichten.

Beispiel:Auseichten einer Grafik im Text
So sieht das Original aus:<br>
xxxxxxxxxxxxxxxxxRRR<img src="img/r.gif" alt="r.gif">RRRxxxxxxxxxxxxxxxxxx<br>
und so nach der Ausrichtung:<br>
xxxxxxxxxxxxxxxxx
RRR<span style="vertical-align:bottom"><img src="img/r.gif" alt="r.gif"></span>RRR
xxxxxxxxxxxxxxxxxx
So sieht das Original aus:
xxxxxxxxxxxxxxxxxRRRr.gifRRRxxxxxxxxxxxxxxxxxx
und so nach der Ausrichtung:
xxxxxxxxxxxxxxxxx RRRr.gifRRR xxxxxxxxxxxxxxxxxx

Text transformieren

Mit dieser Eigenschaft können Sie in einem Textbereich Klein- oder Großbuchstaben oder Kapitälchen erzwingen, unabhängig davon, wie die einzelnen Buchstaben tatsächlich in der Datei stehen.

text-transform: Mit text-transform: können Sie die Transformation bestimmen. Folgende Angaben sind möglich:
  • capitalize = Wortanfänge als Großbuchstaben.
  • uppercase = Nur Großbuchstaben.
  • lowercase = Nur Kleinbuchstaben.
  • none = normal (keine Text-Transformation).

Beispiel:
<span style="text-transform:capitalize">
text in kleinbuchstaben geschrieben, transformiert mit <b>text-transform:capitalize</b>
</span><br>
<span style="text-transform:uppercase">
text in kleinbuchstaben geschrieben, transformiert mit <b>text-transform:uppercase</b>
</span><br>
<span style="text-transform:lowercase">
TEXT IN GROßBUCHSTABEN GESCHRIEBEN, TRANSFORMIERT MIT <b>TEXT-TRANSFORM:LOWERCASE</b>
</span>
text in kleinbuchstaben geschrieben, transformiert mit text-transform:capitalize
text in kleinbuchstaben geschrieben, transformiert mit text-transform:uppercase
TEXT IN GROßBUCHSTABEN GESCHRIEBEN, TRANSFORMIERT MIT TEXT-TRANSFORM:LOWERCASE

Text dekorieren

Mit dieser Eigenschaft können Sie zusätzliche Textformatierungen wie unterstrichenen oder durchgestrichenen Text erzwingen.

text-decoration: Mit text-decoration: können Sie die zusätzliche Formatierung bestimmen. Folgende Angaben sind möglich:
  • underline = unterstrichen.
  • overline = überstrichen.
  • line-through = durchgestrichen.
  • blink = blinkend.
  • none = normal (keine Text-Dekoration).

Beispiel:
<p>
<span style="text-decoration:underline">
text unterstrichen</span> transformiert mit <b>text-decoration:underline</b>
</p>
<p>
<span style="text-decoration:overline">
text überstrichen</span> transformiert mit <b>text-decoration:overline</b>
</p>
<p>
<span style="text-decoration:line-through">
text durchgestrichen</span> transformiert mit <b>text-decoration:line-through</b>
</p>
<p>
<span style="text-decoration:blink">
text blinkend</span> transformiert mit <b>text-decoration:blink</b>
</p>

text unterstrichen transformiert mit text-decoration:underline

text überstrichen transformiert mit text-decoration:overline

text durchgestrichen transformiert mit text-decoration:line-through

text blinkend transformiert mit text-decoration:blink

Der MS Internet Explorer interpretiert die Angabe blink nicht.