[an error occurred while processing this directive][an error occurred while processing this directive] [an error occurred while processing this directive] Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : FONT } [an error occurred while processing this directive]
[an error occurred while processing this directive][an error occurred while processing this directive]

Welche Entwicklungen gibt es im Bereich CSS und auf dem Büchermarkt? Die Autoren einiger beliebter CSS-Bücher haben sich bereit erklärt, die Entwicklung am Markt aus ihrer Sicht kurz darzustellen, hier auf der Buchseite.

CSS 2.1 ::Referenz ::Eigenschaften

CSS 2.1: font

Erläuterungen

Wer aus der Druckbranche oder vom DTP zum Webdesign gekommen ist, dem sind Begriffe wie Font, Typeface oder Schriftbild sicher geläufig. CSS 2.1 verwendet zur Schriftgestaltung die Eigenschaft font. Sie ist eine Kurzschriftdefinition der einzelnen Eigenschaften font-style, font-variant, font-weight, font-size, line-height und font-family. Deklariert man font, werden, wie bei allen anderen Kurzschrift- Eigenschaften auch, zunächst die einzelnen Eigenschaften auf ihre Ausgangswerte zurückgesetzt und danach die notierten Wertangaben gesetzt. Das bedeutet, dass alle einzelnen Eigenschaften, die innerhalb einer font-Deklaration nicht definiert werden, ihre Ausgangswerte erhalten.

Font ist aber mehr als nur die Summe seiner einzelnen Eigenschaften. Mit font haben wir auch die Möglichkeit, Systemfonts zu deklarieren. Systemfonts lassen sich nur als ganzes definieren, d. h. sie können nur mit font, nicht aber mit einzelnen Eigenschaften, wie z. B. font-family, angesprochen werden. Systemfonts und einzelne Eigenschaften können jedoch in derselben Regel auftreten.

Tipps:

Wenn man einzelne Eigenschaften von Systemfonts verändern will, definiert man zuerst den Systemfont und ändert dann mit einer zweiten Regel die gewünschte Eigenschaft.

Es ist vorteilhaft, anstelle der einzelnen Eigenschaften wann immer möglich die entsprechenden Kurzschrift- Eigenschaften zu verwenden. Dadurch werden die notierten Regeln übersichtlicher und kompakter. Man sollte dabei aber im Hinterkopf behalten, dass alle nicht deklarierten einzelnen Eigenschaften auf ihre Ausgangswerte zurückgesetzt werden.

font-size-adjust und font-stretch sind nicht Teil der Eigenschaft font und müssen extra deklariert werden. Dennoch werden sie durch die Eigenschaft font auf ihre Ausgangswerte zurückgesetzt.

Bei der Definition der individuellen Eigenschaften ist syntaktisch folgendes zu beachten:

Anders als bei der Kurzschrift- Eigenschaft background kann hier also nicht jede beliebige Kombination der einzelnen Eigenschaften notiert werden.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'font' [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]?
<'font-size'> [ / <'line-height'> ]? <'font-family'> ]

| caption | icon | menu | message-box | small-caption | status-bar | inherit

Reguläre Werte:
<font-style>
Textneigung
<font-variant>
Kapitälchen
<font-weight>
Schriftstärke
<font-size>
Schriftgröße
<line-height>
Zeilenhöhe
<font-family>
Schriftfamilie
Systemfonts:
Die folgenden Werte gelten nur für Systemfonts. Bei der Verwendung dieser Werte ist Vorsicht geboten, denn nicht alle Werte sind auf jeder Plattform verfügbar. In dem Fall bleibt es laut Standard dem Browser überlassen, den im System fehlenden Wert 'intelligent' zu ersetzen. Deshalb sollte man unbedingt auf allen Sytemen testen.
caption
Systemfont, der für Buttons, Drop-Downs usw. benutzt wird.
icon
Systemfont, der für Icons benutzt wird.
menu
Systemfont, der für Menüs benutzt wird.
message-box
Systemfont, der für Dialogboxen benutzt wird.
small-caption
Systemfont, der für Kleine Erklärungen (ToolTips) benutzt wird.
status-bar
Systemfont, der für die Statuszeile des Systems benutzt wird.
inherit
Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

Dieses Beispiel zeigt eine vollständige Fontdeklaration:

p { font: bold italic small-caps x-large/110% "new century schoolbook", serif }

Im folgenden Beispiel wird die für Menüs voreingestellte Schriftart in einer geänderten Schriftgröße verwendet:

p { font:menu; font-size:16px; }

Browserunterstützung

 
Die Eigenschaft font werden von allen modernen Browsern unterstützt, auf Einschränkungen wird bei den Einzeleigenschaften hingewiesen.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

font-style, font-variant, font-weight, font-size, line-height, font-family

Besonderheiten im Medientyp handheld:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangs-
wert:
Berechneter
Wert:
Vererbung: Anwendbar-
keit:
%-Bezugs-
wert:
Medien-
gruppe(n):
Siehe bei den individuellen Eigenschaften Siehe bei den individuellen Eigenschaften Ja Auf alle Elemente Erlaubt für font-size und line-height Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.

 TOP


Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

Die URL dieser Seite ist: thestyleworks.de/ref/font.shtml
Gedruckt am [an error occurred while processing this directive] Sonntag, dem 21. [an error occurred while processing this directive] Januar, 2017.
© Copyright All Contents 2002- 2017 K. Langenberg.
Commercial Use prohibited.


Notizen: