Schrift- und Textformatierung
Das Schriftbild lässt sich mit CSS vielfältig ändern. Diese Übersicht listet alle nötigen Eigenschaften zur Schriftgestaltung per CSS.
Wie diese typografischen Werkzeuge in Webseiten gestalterisch Sinnvoll eingesetzt werden steht im Artikel Schriftgestaltung für Webseiten.
- @font-face: Eigene Schriftarten laden
- color: Schriftfarbe
- font-family: Schriftart
- font-size: Schriftgröße
- font-style: Schriftneigung
- font-variant: Kapitälchen
- font-weight: Schriftstärke
- font: Kurzform für Schrift-Eigenschaften
- letter-spacing: Zeichenabstand
- text-indent: Texteinzug
- text-align: Ausrichtung
- text-decoration: Textdekoration
- text-transform: Texte transformieren
- text-shadow: Schattenwurf für Text (CSS3)
- text-overflow: Zu langer Text
- word-spacing: Wortabstand
- white-space: Textumbruch steuern
- vertical-align: Vertikale Ausrichtung innerhalb einer Zeile
@font-face: Eigene Schriftarten laden
Beschreibung: Mit @font-face lassen sich eigene Schriftarten laden
Mit @font-face
kann eine beliebige Schriftdatei auf einem Server angegeben werden, die
dann heruntergeladen und vom Browser verwendet wird. Zu beachten ist
hierfür aber besonders die Lizenz der Schriftart.
color: Schriftfarbe
Werte: Farbangabe
Die Schriftfarbe eines Textes kann mit der Eigenschaft color festgelegt werden.
font-family: Schriftart
Werte: Liste mit Schriftarten oder generische Schriftarten
Mit font-family kann die Schriftart eines Textes festgelegt werden.Hierbei lassen sich mehrere Schriftarten auflisten, ist eine Schriftart nicht vorhanden wird die nächste versucht. Abschließend kann eine generische Schriftart angegeben werden.
font-size: Schriftgröße
Werte: Länge, Prozentangabe, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger
Um die Größe der Schrift angeben zu können verwendet man font-size. Die Größenangabe kann hierbei abhängig von der Schriftgröße darüberliegender HTML-Elemente sein.
font-style: Schriftneigung
Werte: italic, oblique, normal
Kursive Schrift.
font-variant: Kapitälchen
Werte: small-caps, normal
Kapitälchen
font-weight: Schriftstärke
Werte: bold, bolder, lighter, Stärke (100 bis 900), normal
Mit Hilfe von font-weight lässt sich die Schriftstärke festlegen. So ist es beispielsweise möglich Text fett darzustellen.
font: Kurzform für Schrift-Eigenschaften
Werte: Auflistung der Werte für font-style font-variant font-weight font-size und font-family
Wichtig: Die Reihenfolge der Eigenschaften muss so, wie beschrieben eingehalten werden. Der Browser ignoriert sonst die komplette Zeile.
Durch die Kurzschreibweise können mehrere font-Eigenschaften gleichzeitig gesetzt werden.
letter-spacing: Zeichenabstand
Werte: normal, Längenangabe
Mit letter-spacing lässt sich der Abstand zwischen dein einzelnen Zeichen verändern.
text-indent: Texteinzug
Werte: Länge, Prozentangabe
Mit text-indent kann der Texteinzug festgelegt werden. Bei Fließtexten wird hierbei die erste Zeile um den angegebenen Wert nach rechts verschoben, davor entsteht ein Freiraum.
text-align: Ausrichtung
Werte: left, right, center, justify
text-align dient dazu den Text innerhalb eines Block-Elements auszurichten. Neben zentrierter oder rechter Ausrichtung kann auch die Anzeige als Blocksatz (justify) gewählt werden.
text-decoration: Textdekoration
Werte: none, underline, overline, line-through, blink
Mit Hilfe von text-decoration lässt sich der Text mit einfachen mitteln dekorieren. So kann durch die Eigenschaft beispielsweise festgelegt werden, dass der Text unterstrichen wird. Bei Links lässt sich genau diese Standardformatierung durch die Verwendung von none entfernen.
text-transform: Texte transformieren
Werte: capitalize, uppercase, lowercase, none
Um einen Text anders darzustellen kann er mithilfe von text-transform verändert werden. Hierbei gibt es Möglichkeiten wie den Text in Großschrift darzustellen.
text-shadow: Schattenwurf für Text (CSS3)
Werte: Längenangabe, Farbangabe
Die Möglichkeit einen Schattenwurf per CSS zu realisieren öffnet den Web-Designern neue interessante Möglichkeiten.
text-overflow: Zu langer Text
Werte: clip, ellipsis
Was mit überfließendem Text geschehen soll, kann mit text-overflow gesteuert werden. Hier kann man z.B. automatisch bei zu langem Text Pünktchen "..." anhängen lassen. (Opera:-o-text-overflow )
word-spacing: Wortabstand
Werte: normal, Längenangabe
Um den Abstand zwischen einzelnen Wörtern zu verändern kann word-spacing verwendet werden.
white-space: Textumbruch steuern
Werte: normal, pre, nowrap, pre-wrap, pre-line
Mit Hilfe von white-space lässt sich der automatische Umbruch von überlangem Text steuern bzw. abschalten.
vertical-align: Vertikale Ausrichtung innerhalb einer Zeile
Werte: baseline, sub, super, top, text-top, middle, bottom, text-bottom, Prozentangabe, Längenangabe
vertical-align kann dazu benutzt werden Elemente, beispielsweise Bilder, innerhalb der Zeile vertikal auszurichten. Innerhalb von Tabellen-Zellen wird der Inhalt der Zelle mithilfe von vertical-align ausgerichtet, die Bedeutung wechselt hier.
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 8 Personen an der Seite "Schrift- und Textformatierung" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Schrift- und Textformatierung" hier bearbeiten.
David Danier
Thomas Hümmer
Fabian Ziegler
Thomas Maier
Michael Zaversnik
Michael Karl
Moritz Kern
Darius M.