Schrift- und Textformatierung

1 | 37835 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Schrift- und Textformatierung" mit Ihrem Wissen!

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.

Anzeige Hier werben

@font-face: Eigene Schriftarten laden

Firefox3.6Unterstützt4+Unterstützt
IE7Fast8Fast9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
@font-face

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

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
color

Werte: Farbangabe

Die Schriftfarbe eines Textes kann mit der Eigenschaft color festgelegt werden.

font-family: Schriftart

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
font-family

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

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
font-size

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

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
font-style

Werte: italic, oblique, normal

Kursive Schrift.

font-variant: Kapitälchen

Werte: small-caps, normal

Kapitälchen

font-weight: Schriftstärke

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
font-weight

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

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
font

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

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
letter-spacing

Werte: normal, Längenangabe

Mit letter-spacing lässt sich der Abstand zwischen dein einzelnen Zeichen verändern.

text-indent: Texteinzug

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
text-indent

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

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
text-align

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

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
text-decoration

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

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
text-transform

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)

Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Nein
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
text-shadow

Die Möglichkeit einen Schattenwurf per CSS zu realisieren öffnet den Web-Designern neue interessante Möglichkeiten.

text-overflow: Zu langer Text

Firefox3.6Unbekannt4+Unbekannt
IE7Unterstützt8Unterstützt9Unbekannt
Opera11Unbekannt12Unbekannt
1+Unbekannt
Safari4Unterstützt5Unbekannt
text-overflow

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

Firefox3.6Unbekannt4+Unbekannt
IE7Unterstützt8Unterstützt9Unbekannt
Opera11Unbekannt12Unbekannt
1+Unbekannt
Safari4Unterstützt5Unbekannt
word-spacing

Werte: normal, Längenangabe

Um den Abstand zwischen einzelnen Wörtern zu verändern kann word-spacing verwendet werden.

white-space: Textumbruch steuern

Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
white-space

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

Firefox3.6Unterstützt4+Unterstützt
IE7Fast8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
vertical-align

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.


Wikiseite bearbeiten

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.