CSS: Texte und Schriften

Dieser Artikel wurde von Do, Hoang Viet am Mittwoch, 3. April 2013 verfasst. Aktualisiert: 28.01.2014 18:44:06

Bei der Schrift lässt sich unter anderem Schriftart, Schriftgröße, Schriftdicke, Schriftgröße, Ausrichtung und der Schatten ändern.

Schriftart und Schriftfamilien

Um die Schriftart zu ändern, wird die Property font-family benutzt.

Im nachfolgendem Beispiel wird die Schriftart "Arial" ausgewählt.

body { 
  font-family: Arial;
}

Da nicht garantiert werden kann, dass der Besucher der Webseite auch die gewünschte Font auf seinem lokalen Rechner installiert hat, können mehrere Fonts angegeben werden. Man spricht hier von "Font Family".

body { 
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}

Die Schriftart "Palatino Linotype" wird hier bevorzugt ausgewählt. Wenn dieser aber auf den Rechner vom Besucher nicht installiert ist, wird "Book Antiqua" ausgewählt. Wenn dieser nicht installiert ist, wird "Palatino" aus gewählt. Wenn selbst dieser Font nicht installiert ist, dann wird "serif" ausgewählt. Dieser gehört zu den Grundschriftarten und sollte auf jeden Rechner vorliegen.

Eine Auflistung von einigen Font-families ist auf der folgende Seite zu finden: externe Link.

Schriftgröße und Schriftdicke

Die Schriftgröße lässt sich über die Property "font-size" einstellen:

body { 
  font-size: 26px;
}

Die Schriftdicke gibt an, ob wie dick ein Zeichen dargestellt werden soll. Es werden Werte von 100 - 900 akzeptiert, wobei nur wenige Browser alle Werte darstellen können.

body { 
  font-weight: 400;
}

Die 400 entspricht die normale Darstellung und 700 fettgedruckte Zeichen. Alternativ zu den Zahlen werden auch die Werte normal, bold, bolder und lighter akzeptiert.

body { 
  font-weight: bold;
}

 bolder wird von den meisten Browser als bold betrachtet. Und lighter als normal.

Kursive Schrift

Um die Schrift kursiv zu definieren, stellt CSS die Property font-style zu Verfügung

body { 
  font-style: italic;
}

Anstelle von italic wäre auch normal (normale Text) oder inherit (wie der vom übergeordneten Element).

Textdekoration

Über das Attribute text-decoration lässt sich die Textdekoration bestimmen. Dazu gehört beispielsweise der Unterstrich unter einem Text.

body { 
  text-decoration: underline;
}

Die Definition im Beispiel ist per-default bei den Hyperlinks enthalten. Soll der Unterstrich von den Hyperlinks verschwinden, hilft folgende Definition

a { 
  text-decoration: none;
}

 Folgende Werte werden akzeptiert:

none Normale Text
blink Text blinkt
line-through Durchgestrichelten Text
overline Text mit Überstrich
underline Text mit Unterstrich

Textschatten

Ab der Version 3 lässt sich in CSS auch der Textschatten über die Property "text-shadow" definieren. Es ist aber darauf zu achten, dass nicht alle Browser diese Eigentschaft verstehen. Insbesondere ältere Browser.

h1 {
  text-shadow: 4px 4px #00ff00;
}

Dieser Text wirf einen Schatten zurück.

Die beiden ersten Werte definieren die horizontale und vertikale Verschiebung des Schatten. Die letzte Angabe steht für die Farbe.

Neben den 3 Größen lässt sich auch die Schattenunschärfe bestimmen:

h1 {
  text-shadow: 4px 4px 20px #00ff00;
}

Die obrige Definition erzeugt eine nach rechts und unten ausgerichteten grünen Schatten mit einer Unschärfe von 20px.

 
blog comments powered by Disqus

Google Anzeigen

Neusten Blogeinträgen

  • CSS: Animationen

    CSS3 bietet von Haus aus Möglichkeiten zur Definition von Animationen über die Property animation. Wie es funktioniert zeigen wir in diesem Artikel.

  • CSS: Alternierende Tabellenzeilen

    Um die Lesbarkeit von Tabellen zu steigern, bietet die CSS die Möglichkeit Tabellenzeilen alternierend zu färben. Wie das funktioniert zeigen, wir ...

  • Unity3D: Konsolenausgabe formatieren

    Die Unitykonsole ist einer der meistgenutzten Feature wenn es bei Unity um Fehlersuche und -behandlung geht. Sie wird dabei schnell voll und verli ...

  • Unity3D: Singleton für langsame Operationen

    Operationen wie Object.FindObjectOfType werden in der Dokumentation von Unity3D Entwickler selbst als sehr langsam beschrieben. Aus dem Grund wird ...

  • Unity3D: Optionale Parameter

    Unity3D (4.3.1) unterstützt keine optionale Parameter, wenn die betroffene Skriptdatei in einem Namespace definiert wird.

Popular Threads

Share it on your network