Letzte Änderung am 21.01.2005
Cascading Style Sheets - ein Tutorial
Vorbemerkung: Die Kapiteleinteilung hält sich an das Buch von Eric A. Meyer: Cascading Style Sheets, The Definitive Guide, O'REILLY, 2004.
Es soll eine sinnvolle Adaptation der W3C-Regeln zu CSS1, 2 und 2.1.aus der Perspektive von Lernenden sein. Die eingefügten Demos lassen sich-fast ohne Ausnahme-im Quelltext editieren und ansehen. Der Code ist so einfach wie möglich gehalten und das Tutorial kann auch offline benutzt werden. CSS-Bereiche, die in den gängigen Browsern bisher nicht implementiert wurden, werden nicht dokumentiert.
Andreas Lutz MatteDesign, Bern

Kapitelübersicht

Kapitel 5: Fonts

• Font-Familien (font-family)
• Schriftgewicht (font-weight)
• Schriftgrösse (font-size)
• Schriftstil (font-style)
• Schriftvariante (font-variant)
• Schrift-Gesamtangaben (shorthand: font)

Font Familien
Generelle Vorbemerkung:
Viele Eigenschaften von Schriften hängen erstens von den installierten Fonts (ob sie vorhanden sind), wie zweitens vom Font-Design selbst ab. Fehlende Eigenschaften im Fontdesign können von CSS nicht wettgemacht werden.
CSS bietet Annäherungen, soweit sie möglich sind.
Generische Schriftarten
Serifenschriften (serif):
Proportional mit Serifen, beispielsweise: Times, Georgia, New Century Schoolbook
Serifenlose Schriften (sans-serif):
Proportional, serifenlos, beispielsweise: Helvetica, Geneva, Verdana, Arial, Univers
Monospace Schriften (monospace):
Nicht-proportional, emulieren Typewriterschriften von alten Dot-Matrix Printern, beispielsweise: Courier, Courier New, Andala Mono
Kursive Schriften (cursive):
Emulieren Handschriften, beispielsweise: Zapf Chancery, Author, ComicSans
Fantasie-Schriften (fantasy):
Beispielsweise Western, Woodblock, Klingon
Verwendung generischer Schriftarten:
Es ist möglich, allein mit generischen Schriftarten ein Font-Layout zu definieren. Allerdings hat man die Macht über den eigentlichen Schrifttyp nicht.
Beispiel: h1{font-family:sans-serif}
Demo 1

Spezifische Font-Familien

Beispiel: p{font-family:Georgia;serif}
Es ist gute Praxis, immer nach dem Font-Typ eine generische Schriftart zu definieren, falls diese Schrift im Browser nicht zur Verfügung steht.
Besteht die Schriftart aus mehrern Wörtern mit Leerschlägen, so werden sie in einfache oder doppelte Klammern gesetzt.

Demo 2

Schriftgewicht

Demo 3

Bei nicht vorhandenen Eigenschaften wird auf oder abgerundet: 700 entspricht "bold" und 400 entspricht "normal"
Hypothetische Schrifttabelle für eine spezifische Font-family:

Schriftart	Zugeordnete Schlüsselwörter	Zugeordnete Nummern
Zurich light		100, 200, 300
Zurich Medium		500
Zurich Regular	normal	400
Zurich bold	bold	600, 700
Zurich Black		800
Zurich UltraBlack		900

Dies hängt vom Font-Design selbst ab. Schriftarten, die nur normal und fett haben, verteilen die entsprechenden Nummern anders, genereller.
Relative Angaben (bolder, lighter):
Dies ist abhängig vom gesetzten Wert des übergeordneten Elementes und vom Schriftdesign.

Schriftgrösse

Demo 4

Font-Size wird von den Designern als em-quadrat definiert (em-box), in der alle vorkommenden Buchstaben Platz haben.
Absolute Grössenangaben
Der Medium-Typ hat eine Grösse von 16px. Daraus ergeben sich Skalierungsfaktoren in Pixel von einem Typ zum nächst höheren/tiefern von ca.1.5-1.2)

Schlüsselwort	Skalierung: 1.5	Skalierung: 1.2
xx-small	5px	9px
x-small	7px	11px
small	11px	13px
medium	16px	16px
large	24px	19px
x-large	36px	23px
xx-large	54px	28px

Allerdings ist dieser Faktor immer auch vom Browsertyp abhängig.
Relative Grössenangaben
smaller, larger: gleiten die Skala der absoluten Grössen ab und auf, und bestimmen sich nach der Grössenangabe (computed Style) im übergeordneten Element.
Prozentangaben und Grössen
Sie sind ebenfalls relativ zum Elternelement, aber feiner zu kontrollieren als die Angaben larger und smaller. Wie die Prozentangaben verhält sich auch die Grössenangabe em.
Schriftgrösse und Vererbung
Schriftgrössen werden vererbt und letzlich immer in Pixelgrössen umgerechnet (und gerundet). Prozentangaben verhalten sich daher kumulativ! D.h. 80% von 15px sind 9px, 90% davon ergibt schlussendlich 8px. Dies kann theoretisch bei vielfach verschachtelten Elementen (Tabellen, Listen) zu erheblichen Leseproblemen führen.
Demo 3 Massangaben
Längenmasse <length>
Die folgenden Angaben sind alle gleich:
{font-size:36pt}
{font-size:3pc}
{font-size:0.5in}
{font-size:1.27cm}
{font-size:12.7mm}
Diese Gleichwertigkeit wird durch die verfügbaren ppi des Bildschirms definiert (Bildschirmauflösung)
Es setzt sich immer mehr durch, dass für die Font-Grösse relative Angaben (px,em) gesetzt werden. (Mac-Problem, bei kleinerer Bildschirmauflösung). Dies verspricht grössere Konsistenz beim Design.

Schriftstile und -varianten

Demo 5

Normalerweise ist italic eine spezielles Schrift-Design, während oblique nur eine "geneigte" Version des normalen Schriftstils ist.

Demo 6

Stellt die Schrift in normalen und kleinen Grosschriftbuchstaben dar.

Stretching und Ajusting
Ist aus der Version CSS 2.1 weil niergends implementiert elimiert worden.

Font-Eigenschaft (font)
Zusammenfassende font: Eigenschaften.
Reihenfolge der Angaben: Muster: font: font-variant font-weight font-size /line-hight font-family
Beispiel: 1:h2{font:normal italic 200%/1.2 Verdana,Helvetica, Arial, sans-serif}
Font-size kommt immer vor dem optionalen line-height (mit "/").
Die Font-Family kommt immer am Schluss und muss angegeben werden. Ansonsten können Elemente weggelassen werden. Es wird der Normalwert ausgewählt oder der Wert auf normal gesetzt.
Die Shorthand-Property vererbt weggelassene Eigenschaften in einer überschreibenden oder ergänzenden Definition für dasselbe Element nicht.

Demo 7

System Fonts (Betriebssystem, "user-style"-Angaben)
caption: Button-Anschriften
icon: font bei gelabelten Icons
menu: Menüfonts
message-box: Fonts in Dialogboxen
small-caption: Font bei schmalen Controls
status-bar: font in der Statuszeile
Beispiel: button{font: caption; font-size:1em;} ->S. Kapitel 13

@font-face: Wurde wegen nicht Implementierung in den Browsern in CSS 2.1. verbannt. Es fehlt hier noch ein Stück über Font-Matching und font downloads...

Weiter zu Kapitel 6: Text-Eigenschaften