Websiteentwicklung: CSS: Schriftformatierungen
Aus Wikibooks
 |
ACHTUNG: Dieser Artikel bedarf dringend einer Überarbeitung oder Erweiterung. Wenn du Lust hast, beteilige dich daran! |
[Bearbeiten] Übersicht aller Schriftformatierungen
| Element | Beschreibung | Mögliche Einstellungen | Verwendung/ Beispiel |
|---|---|---|---|
| font-family | Einstellung der Schriftart | alle Schriftarten | Als Attribut wird der Name der Schriftart verwendet. Dabei sollten immer mehrere Schriftarten (durch Kommata abgetrennt) angegeben werden, da ja nicht jeder alle möglichen Schriftarten auf dem Rechner hat (Besonders bei Linux/Unix ist das der Fall da dort die WebBrowser zum Teil eigene CSS implementieren und zudem noch der Xfont Server mitspielen muss). Als letzte sollte "Arial", "sans-serif", "serif" oder "verdana" angegeben werden, weil dies eine Standardschriftart bzw. generische Schriftfamilien sind, die unter fast allen Betriebssysteme vorhanden sind. Bsp.: font-family:'Times New Roman',Arial,sans-serif; => Anwendungsbeispiel Auf GROSS- und klein- Schreibung muss nicht zwingend geachtet werden da die CSS- bzw. HTML-Parser in der Regel nichts bemängeln (dies gilt auch für andere CSS). |
| font-size | Einstellung der Schriftgröße | numerische Angaben oder xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger | Diese Ausdrücke sind recht ungenau. Sie beziehen sich auf die auf dem Rechner angegebene Standardschriftgröße. Der Browser verändert sie entsprechend der Bezeichnung (bspw. "smaller"=kleiner als Standard) bzw. sucht die für den jeweiligen Begriff vorgesehenen Einstellungen heraus. Bsp.: font-size:larger; oder font-size:24pt; oder font-size:50% => Anwendungsbeispiel oder Anwendungsbeispiel oder Anwendungsbeispiel |
| font-weight | Einstellung des "Schriftgewichtes" | normal, bold (=fett), bolder (=fetter), lighter (=dünner); 100 - 900 (verschiedene Abstufungen; 700 = bold) | "Schriftgewicht" entspricht einfach nur der Fette des Textes, d.h., ob der Text fett geschrieben ist oder nicht. Dabei gilt es zu beachten, dass nicht alle Schriftarten alle Ausdrücke "verstehen", weshalb eigentlich nur auf bold oder normal zurückgegriffen werden sollte. Bsp.: font-weight:bold; => Anwendungsbeispiel |
| font-style | Einstellung des Schriftstils | normal, italic, oblique | italic und oblique stellen die Schrift kursiv dar. (Es sollte auf italic zurückgegriffen werden.) Bsp.: font-style:oblique; => Anwendungsbeispiel |
| font-variant | Einstellungen der Schriftvariante | normal, small-caps (=Kapitälchen; kleine Großbuchstaben) | Bsp.: font-variant:small-caps; => Anwendungsbeispiel |
| font-stretch | Ausdehnung eines Textes; Schriftlaufweite | normal, wider (=weiter), narrower (=enger), condensed (=gedrängt), semi-condensed (=halb-gedrängt), extra-condensed (=stark gedrängt), ultra-condensed (=sehr stark gedrängt), expanded (=geweitet), semi-expanded (=halb-geweitet), extra-expanded (=stark geweitet), ultra-expanded (sehr stark geweitet) | Bei den meisten wird das Beispiel nichts bringen, da diese Eigenschaften weithin noch nicht in den Browsern implementiert ist. Bsp.: font-stretch:extra-expanded; oder font-stretch:condensed; => Anwendungsbeispiel oder => Anwendungsbeispiel |
| font | Zusammenfassung einiger Font-Elemente | alle Einstellungen der Einzelelemente | Hier werden alle Eigenschaften aneinander gereiht. Die Reihenfolge der Anordnung ist egal. Dabei ist aber darauf zu achten, dass die verschiedenen Eigenschaften voneinander durch ein Leerzeichen getrennt sind. Bsp.: font:small-caps 16pt bold; => Anwendungsbeispiel |
