Benutzer:Apsel/Referenz/CSS/Eigenschaften/Schriftformatierung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

font-family[Bearbeiten]

Eigenschaft font-family CSS 1.0
Beschreibung bestimmt die zu verwendende Schriftart
erlaubte Werte
  • eine oder mehrere durch Kommata getrennte Schriftarten oder Schriftartfamilien
  • inherit
default-Wert

browserabhängig

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung ja
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Fonts Module Level 3
Beispiel
p {font-family: "Times New Roman", Garamond, serif;}
  • legt für alle Textabsätze die Schriftart „Times New Roman“ fest
  • falls diese nicht installiert ist, soll die Schriftart „Garamond“ verwendet werden
  • fehlt auch diese, soll der Browser eine Schriftart mit Serifen verwenden
Beachten Sie

Sie sollten Schriftarten, deren Name Leerzeichen enthält, in Anführungszeichen setzen.

Tipp

Als letzte Alternative sollten Sie eine Schriftartfamilie vereinbaren.

Schriftartfamilien[Bearbeiten]

  • serif: Schriftart mit Serifen
  • sans-serif: Schriftart ohne Serifen
  • cursive: Schriftart für Schreibschrift
  • fantasy: Schriftart für ungewöhnliche Schrift
  • monospace: Schriftart mit dicktengleichen Zeichen

siehe auch[Bearbeiten]

font-style[Bearbeiten]

Eigenschaft font-style CSS 1.0
Beschreibung bestimmt die Neigung der Schrift
erlaubte Werte
  • italic, oblique, normal
  • inherit
default-Wert

normal

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung ja
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Fonts Module Level 3
Beispiel
dd {font-style: italic;}

legt für alle dd-Elemente einen kursiven Schriftstil fest

Beachten Sie

Zwischen „italic“ und „oblique“ gibt es praktisch keinen Unterschied.

Tipp

font-variant[Bearbeiten]

Eigenschaft font-variant CSS 1.0
Beschreibung bestimmt die zu verwendende Schriftvariante
erlaubte Werte
  • normal, small-caps
  • inherit
default-Wert

normal

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung ja
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Fonts Module Level 3
Beispiel
h1 {font-variant: small-caps;}

legt für Überschriften 1. Ordnung Kapitälchen als Schriftvariante fest

Beachten Sie
Tipp

font-size[Bearbeiten]

Eigenschaft font-size CSS 1.0
Beschreibung bestimmt die zu verwendende Schriftgröße
erlaubte Werte
  • eine nicht negative numerische Angabe
  • eine Prozentangabe
  • xx-small, x-small, small, medium, large, x-large, xx-large
  • smaller, larger
  • inherit
default-Wert

medium

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung ja
animierbar ja
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Fonts Module Level 3
Beispiel
strong {font-size: larger;}

legt für alle strong-Elemente eine im Vergleich zum Elternelement größere Schrift fest

Beachten Sie

Alle prozentualen Angaben beziehen sich auf die Schriftgröße des Elternelements.

Tipp

line-height[Bearbeiten]

Eigenschaft line-height CSS 1.0
Beschreibung bestimmt die zu verwendende Zeilenhöhe
erlaubte Werte
default-Wert

normal

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung ja
animierbar ja
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS2 Visual formatting model details
Beispiel
p {line-height: 1.3;}

legt für alle Textabsätze eine Zeilenhöhe von 130% der Schriftgröße fest

Beachten Sie

Alle Zahlenangaben beziehen sich auf die Schriftgröße des Elements selbst.

Tipp

font-weight[Bearbeiten]

Eigenschaft font-weight CSS 1.0
Beschreibung bestimmt die zu verwendende „Dicke“ der Schrift
erlaubte Werte
  • normal, bold
  • lighter, bolder
  • 100, 200, ..., 900
  • inherit
default-Wert

normal (tatsächliche Strichstärke ist browser- und schriftartabhängig)

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung ja
animierbar ja, bei Angabe als Zahl
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Fonts Module Level 3
Beispiel
tt {font-weight: lighter;}

legt für alle tt-Elemente eine im Vergleich zum Elternelement dünnere Schrift fest

Beachten Sie

Alle prozentualen Angaben beziehen sich auf die Schriftgröße des Elternelements.

Tipp

lighter, nicht smaller

font-stretch[Bearbeiten]

Eigenschaft font-stretch CSS 3.0 CSS 2.0
Beschreibung bestimmt, in welcher Breite die einzelnen Zeichen dargestellt werden
erlaubte Werte
  • ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded
  • narrower, wider (deprecated)
  • inherit
default-Wert

normal (die tatsächliche Darstellung ist browser- und schriftartabhängig)

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung ja
animierbar ja, schrittweise
Browsersupport
  • Leer
  • Firefox
  • IE 9
  • Leer
  • Leer
Spezifikation W3c logo klein.gif CSS Fonts Module Level 3
Beispiel
small {font-stretch: expanded;}

Legt für alle small-Elemente gestreckte Zeichen fest

Beachten Sie
Tipp

font[Bearbeiten]

Eigenschaft font CSS 3.0 CSS 1.0
Beschreibung Zusammenfassung der Eigenschaften font-style, font-variant, font-weight, font-stretch, font-size, line-height und font-family
erlaubte Werte
  • siehe Einzelwerte
  • CSS 2.0 caption, icon, menu, message-box, small-caption, status-bar
  • inherit
default-Wert

browserabhängig

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung ja
animierbar ja, siehe Einzelwerte
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Fonts Module Level 3
Beispiel
body { font: bold .9em/150% Georgia, serif; }

legt für das body-Element und seine Nachfahren fetten Text in der Größe 0.9em und einer Zeilenhöhe von 150% der Schriftart „Georgia“ fest

Beachten Sie

Es gibt eine festgelegte Reihenfolge (siehe Spezifikation), nicht angegebene Eigenschaften erhalten ihren Initialwert. Die Eigenschaft font-variant darf nur Werte erhalten, die auch in CSS Level 2 Revision 1 vorhanden sind.

Tipp

Browser, die die Eigenschaft font-stretch nicht verstehen, erklären die gesamte Zeile für ungültig. Definieren Sie font-stretch daher separat von den anderen Eigenschaften.

text-transform[Bearbeiten]

Eigenschaft text-transform CSS 1.0
Beschreibung bestimmt, ob Groß- oder Kleinbuchstaben dargestellt werden sollen
erlaubte Werte
  • none, lowercase, uppercase, capitalize
  • inherit
default-Wert

none

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung ja
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS2 Text
Beispiel
header h2 {text-transform: uppercase;}

legt fest, dass Überschriften zweiter Ordnung in header-Elementen in Majuskeln dargestellt werden

Beachten Sie
Tipp

color[Bearbeiten]

Eigenschaft color CSS 1.0
Beschreibung legt die Schriftfarbe eines Elements fest
erlaubte Werte
default-Wert

browserabhängig

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung ja
animierbar ja
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Color Module Level 3
Beispiel
.phpcode {color: red;}

legt für alle Elemente der Klasse phpcode eine rote Schriftfarbe fest

Beachten Sie

Achten Sie auf kontrastreiche Farbkombinationen.

Tipp

word-spacing[Bearbeiten]

Eigenschaft word-spacing CSS 1.0
Beschreibung bestimmt die Abstände zwischen einzelnen Wörtern
erlaubte Werte
default-Wert

normal

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung ja
animierbar ja
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS2 Text
Beispiel
code.math {word-spacing: .5em;}

legt für code-Elemente der Klasse math einen Wortabstand von 0.5em fest

Beachten Sie
Tipp

letter-spacing[Bearbeiten]

Eigenschaft letter-spacing CSS 1.0
Beschreibung bestimmt die Abstände zwischen einzelnen Zeichen
erlaubte Werte
default-Wert

normal

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung ja
animierbar ja
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS2 Text
Beispiel
h4 {letter-spacing: .25em;}

legt für Überschriften 4. Grades einen Zeichenabstand von 0,25em fest

Beachten Sie
Tipp

text-decoration[Bearbeiten]

Eigenschaft text-decoration CSS 1.0
Beschreibung bestimmt eine Textausschmückung
erlaubte Werte
  • none
  • eine Auswahl von underline, line-through, overline, Achtung blink
  • inherit
default-Wert

browser- und elementabhängig

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS2 Text
Beispiel
a {text-decoration: overline underline;}

legt fest, dass Link-Elemente über- und unterstrichen werden

Beachten Sie

Die Farbe der Dekoration ist die Textfarbe des Elements.

Tipp

Verzichten Sie auf blinkenden Text.

Eigenschaft text-decoration CSS 3.0
Beschreibung Zusammenfassung der Eigenschaften text-decoration-style, text-decoration-line und text-decoration-color
erlaubte Werte
  • siehe Einzelwerte
  • none
  • inherit
default-Wert

browser- und elementabhängig

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer
Spezifikation W3c logo klein.gif CSS Text Decoration Module Level 3
Beispiel
a {text-decoration: underline dotted red;}

legt fest, dass Link-Elemente mit einer roten gepunkteten Linie unterstrichen werden

Beachten Sie

Es gibt keine festgelegte Reihenfolge, nicht aufgeführte Einzeleigenschaften werden mit ihren Default-Werten initialisiert.

Tipp

text-decoration-style[Bearbeiten]

Eigenschaft text-decoration-style CSS 3.0
Beschreibung legt die Art einer Textdekoration fest
erlaubte Werte
  • dashed, dotted, double, solid, wavy
  • inherit
default-Wert

solid

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Text Decoration Module Level 3
Beispiel
 
span.error { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

legt für span-Elemente der Klasse error eine Textdekoration in Wellenform fest

Beachten Sie
Tipp

text-decoration-line[Bearbeiten]

Eigenschaft text-decoration-line CSS 3.0
Beschreibung legt die Art einer Textdekoration fest
erlaubte Werte
  • none
  • eine Auswahl von underline, line-through, overline, blink
  • inherit
default-Wert

browser- und elementabhängig

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Text Decoration Module Level 3
Beispiel
span.error {text-decoration-line: underline;}

legt für alle span-Elemente der Klasse error eine Textunterstreichung fest

Beachten Sie

Die Browser müssen blink nicht unterstützen.

Tipp

Verzichten Sie - auch aus Gründen der Zugänglichkeit auf die Verwendung von blink.

text-decoration-color[Bearbeiten]

Eigenschaft text-decoration-color CSS 3.0
Beschreibung legt die Farbe einer Textdekoration fest
erlaubte Werte
default-Wert

Textfarbe des Elements

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Text Decoration Module Level 3
Beispiel
span.error {text-decoration-color: red;}

legt für span-Elemente der Klasse error eine rote Textdekoration fest

Beachten Sie
Tipp

text-shadow[Bearbeiten]

Eigenschaft text-shadow CSS 3.0
Beschreibung legt Schattenverläufe für Text-Elemente fest
erlaubte Werte
  • none
  • mehrere Komma separierte Angaben von x-Offset, y-Offset, Weichzeichner, Farbe
  • inherit
default-Wert

none

anwendbar auf alle Elemente (Unterschied Tag Element Attribut)
Vererbung ja
animierbar ja
Browsersupport
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Spezifikation W3c logo klein.gif CSS Text Decoration Module Level 3
Beispiel
h1 {text-shadow: 3px 3px #ccc;}

legt für Überschriften erster Ordnung einen grauen Schlagschatten fest

Beachten Sie

eine fehlende Farbangabe wird mit der Textfarbe des Elements initialisiert

Tipp