Cascading Stylesheets Stil mit <Stil>

CSS2-Referenz | HTML-4.01-Referenz | Farben, Zeichen und Maße | Workshop | Externe Links | Impressum | Hinweise

# Font – Stile für die Formatierung von Schriften

Eigenschaften, die die Darstellung von Schriften steuern. Hierzu gehören Schriftarten, -größen, -stile und -varianten wie Kapitälchen oder Versalien, die Spationierung und der Leerraum zwischen Wörtern. Diese Eigenschaften waren die ersten, die breite Beachtung fanden – schließlich ersparen sie die unzähligen Tags wie <font> und <center> und ebenso viele Attribute in den verbleibenden Tags. Acht Eigenschaften sind insgesamt für die Schriftenformatierung spezifiziert:

font-family • font-size • font-size-adjust • font-stretch • font-style • font-variant • font-weight • font

## font-family

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Ja | font-family wählt eine spezielle Schrift oder eine generische Schriftfamilie. font-family kann als Auswahlliste von Schriftfamilien und/oder generischen Schriften genutzt werden. Die einzelnen Werte werden durch Kommata voneinander getrennt – eine der wenigen Stellen, an denen Kommata in der Deklaration von Eigenschaften genutzt werden. Der Browser wird die erste Schrift der Auswahlliste benutzen, die auf dem Zielsystem installiert ist. Die Verwendung von (doppelten) Hochkommas ist optional, aber sie empfiehlt sich, wenn der Name Leerstellen enthält: "Times New Roman". | [ [ family-name | generic-family], ]* [family-name | generic-family]

family-name sind die Namen von Schriften wie Courier, Arial, Times, Helvetica usw. Es gibt keine vollständige Liste, da nicht auf allen Rechnern alle Schriften installiert sind.

generic-family gibt eine von fünf generischen Schriften an:

- serif
- sans-serif
- cursive
- fantasy
- monospace

Allgemein wird empfohlen, stets eine generische Schrift als letzten Eintrag in die Auflistung aufzunehmen.

#### Beispiel

    p { font-family: Courier, "Zapf Dingbat", serif} oder
    <span style="font-family: arial;">Arial</span>
    <span style="font-family: courier;">Courier </span>
    <span style="font-family: helvetica;">Helvetica </span>
    <span style="font-family: palatino;">Palatino </span>
    <span style="font-family: symbol;">Symbol </span>
    <span style="font-family: times;">Times </span>

#### Darstellung

Arial Courier Helvetica Palatino Symbol Times

↑

## font-size

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Ja | font-size steuert die Größe der Schrift mit Werten, die in einer von vier Kategorien angegeben werden. | absolute-size | relative-size | length | percentage

absolute-size: Absolute Schriftgrößen werden in sieben Schritten angegeben:

- xx-small
- x-small
- small
- medium (Voreinstellung)
- large
- x-large
- xx-large

Die jeweilige Ausprägung der Schriftgröße wird durch die Kombination von Rechner und Browser bestimmt.

relative-size: Es gibt zwei relative Schriftgrößen:

- larger
- smaller

Die jeweilige Ausprägung der Schriftgröße wird durch die Kombination von Rechner und Browser bestimmt.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

percentage (Prozentsatz) vergrößert oder verkleinert die Schriftgröße. Werte, die kleiner als 100% sind, reduzieren die Größe, Werte größer als 100% erhöhen die Schriftgröße und bei 100% bleibt die Schrift unbeeinflusst.

Beispiel

    p { font-size:  x-large; }
    p { font-size:  smaller; }
    p { font-size:  18pt; }
    p { font-size:  3em; }
    p { font-size:  75%; }
    p { font-size: 150%; } oder
    <span style="font-size: xx-small;">A </span>
    <span style="font-size: x-small;">A </span>
    <span style="font-size: small;">A </span>
    <span style="font-size: medium;">A </span>
    <span style="font-size: large;">A </span>
    <span style="font-size: x-large;">A </span>
    <span style="font-size: xx-large;">A </span>

#### Darstellung

A A A A A A A

↑

## font-size-adjust

Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Ja | font-size-adjust passt die verschiedenen Größen unterschiedlicher Schriftfamilien aneinander an und ist dafür gedacht, die Alternativschriften einer Auswahlliste in ähnlicher Größe darzustellen. | none | number

Sowohl die Angabe von Pixel- als auch von Punktwerten führt bei verschiedenen Schriften zu unterschiedlichen Schriftgrößen:

Verdana Arial Georgia Times Tamoha Trebuchet Courier (darum wurde in dieser Referenz der normale Absatztext in Verdana 11px gesetzt, Codebeispiele hingegen in Courier 12px – nur so kann derzeit eine Angleichung der unterschiedlichen Schriftgrößen zwischen Verdana und Courier durchgeführt werden).

Damit beim Ersatz einer Schrift ein ähnlicher Gesamteindruck einer Seite bestehen bleibt, werden die Schriftgrößen über das Verhältnis des kleinen Buchstabens x zur Schriftgröße aneinander angeglichen. Dieses Verhältnis beträgt z.B. bei der Schrift Verdana 0.58, bei der Schrift Flemish Script 0.28.

none ist der Standardwert und stellt sicher, dass jede Schrift in ihrem eigenen Größenverhältnis dargestellt wird und dass vorangegangene Deklarationen keinen Einfluss auf die Darstellung der Schriftgröße haben.

number weist jeder Schrift in der Auswahlliste das gleiche Größenverhältnis zu.

#### Beispiel

    p {font-family: arial, courier; font-size-adjust: none;}
    p {font-family: verdana, courier; font-size-adjust: .56;}

↑

## font-stretch

Zurzeit von keinem Browser unterstützt. Version: CSS2 Erblich: Ja | font-stretch bestimmt Schriftschnitte mit unterschiedlichen Laufweiten. Damit font-stretch funktioniert, muss die gewählte Schrift über die verschiedenen Schnitte verfügen, was heute bei den Systemschriften wie Arial, Verdana und Times nicht der Fall ist. Zurzeit verfügen nur die Schriften von Anbietern wie Adobe und Fontstream über eine entsprechende Auswahl von Schnitten. | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded

narrower wählt einen Schriftschnitt mit schmalerer Laufweite.

wider wählt einen Schriftschnitt mit weiterer Laufweite.

ultra-condensed

extra-condensed

condensed

semi-condensed

normal (Voreinstellung)

semi-expanded

expanded

extra-expanded

ultra-expanded

Die Schnitte sind hier vom schmalsten bis zum breitesten Schnitt aufgeführt. Der Schnitt normal entspricht der normalen Schrift, die im Browser dargestellt wird.

#### Beispiel

    p {font-stretch: wider;}
    p {font-stretch: ultra-expanded;}

↑

## font-style

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Ja | font-style stellt die Schrift normal, kursiv und schräg gestellt dar. | normal | italic | oblique

normal ist die Voreinstellung und stellt die Zeichen aufrecht dar. Die Angabe normal stellt sicher, dass vorangegangene Deklarationen den Schriftstil nicht beeinflussen.

italic stellt die Schrift in einem kursiven Schnitt dar. Wenn kein Kursivschnitt (italic) auf dem Zielrechner installiert ist, benutzt der Browser oblique.

oblique veranlasst den Browser, die Buchstaben schräg darzustellen, um einen Kursivschnitt nachzuahmen.

#### Beispiel

    p { font-style: normal; }
    p { font-style: italic; }
    p { font-style: oblique; } oder
    <span style="font-style: normal;">Normal </span>
    <span style="font-style: italic;">Italic </span>
    <span style="font-style: oblique;">Oblique </span>

#### Darstellung

Normal Italic Oblique

↑

## font-variant

IE4+ N6 Version: CSS1 Erblich: Ja | font-variant stellt die Schrift in Kapitälchen dar. | normal | small-caps

normal ist die Voreinstellung. Die Angabe von normal stellt sicher, dass keine vorangegangene Deklaration die Darstellung des Textes beeinflusst.

small-caps stellt die Schrift in Kapitälchen dar.

Beispiel

    p { font-variant: normal; }
    p { font-variant: small-caps; } oder
    <span style="font-variant: normal;">Normal </span>
    <span style="font-variant: small-caps;">Kapitälchen</span>

#### Darstellung

Normal Kapitälchen

↑

## font-weight

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Ja | font-weight stellt die Schrift fett oder in verschiedenen Abstufungen von fett dar. Die gewählte Schrift muss über verschiedene Schnitte in den jeweiligen Abstufungen verfügen, was heute bei den Systemschriften wie Arial, Verdana und Times nicht der Fall ist. | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Die meisten Browser erkennen nur normal und bold als Schriftgewicht.

normal ist die Voreinstellung. Auf der numerischen Skala von 100 bis 900 wird normal üblicherweise bei 400 angesiedelt. Die Angabe von normal stellt sicher, dass keine vorangegangene Deklaration die Darstellung des Textes beeinflusst.

bold entspricht der Darstellung im <b>-Tag von HTML. Auf der numerischen Skala von 100 bis 900 ist bold üblicherweise bei 700 angesiedelt.

bolder stellt die Buchstaben um eine Stufe fetter dar. Die Stärke der Stufen wird durch die Kombination aus Rechnerplattform und Browser bestimmt.

lighter stellt die Buchstaben um eine Stufe weniger fett dar. Die Stärke der Stufen wird durch die Kombination aus Rechnerplattform/Browser bestimmt.

100 ... 900 stellt die Buchstaben in 9 Stufen von fett dar. Je größer der Wert ist, umso fetter wird der Text dargestellt. Auf der numerischen Skala von 100 bis 900 entspricht 400 normal und 700 bold. Die Stärke der Stufen wird durch die Kombination aus Rechnerplattform und Browser bestimmt.

#### Beispiel

    p { font-weight: normal; }
    p { font-weight: bold; }
    p { font-weight: bolder;    }
    p { font-weight: lighter; }
    p { font-weight: 600; }
    oder
    <span style="font-weight: lighter">lighter</span>
    <span style="font-weight: bolder;">bolder</span>
    <span style="font-weight: 100;">100 </span>
    <span style="font-weight: 200;">200 </span>
    <span style="font-weight: 300;">300 </span>
    <span style="font-weight: 400;">400 </span>
    <span style="font-weight: 500;">500 </span>
    <span style="font-weight: 600;">600 </span>
    <span style="font-weight: 700;">700 </span>
    <span style="font-weight: 800;">800 </span>
    <span style="font-weight: 900;">900 </span>

#### Darstellung

lighter normal bold bolder 100 200 300 400 500 600 700 800 900

↑

## font

IE4+ M1 N4+ O5+ Version: CSS1/Erweitert in CSS2 Erblich: Ja | font bestimmt in einer Deklaration alle sechs Eigenschaften der zu verwendenden Schrift. Zusätzlich kann font seit CSS2 sechs Werte der Systemschrift steuern. | [ [ font-style &| font-variant &| font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar

caption (CSS2) steuert die Schrift in Schaltflächen.

icon (CSS2) steuert die Schrift der Symbole (icons).

menu (CSS2) steuert die Schrift der Klappmenüs.

message-box (CSS2) steuert die Schrift der Dialogfenster.

small-caption (CSS2) steuert die Schrift kleiner Schaltflächen.

status-bar (CSS2) steuert die Schrift in der Windows-Statusleiste.

font-style, font-variant, font-weight, font-size, / line-height und font-family wurden in den vorangegangenen Abschnitten beschrieben.

Beachten Sie den Schrägstrich vor /line-height. Er muss gesetzt werden und wird für die Angabe der Schriftgröße benutzt.

#### Beispiel

    p { font:  italic  small-caps  600  12pts/18pt Courier }
    p { font:  italic  small-caps  600  12pts/150%  Courier }
    p { font:  italic  small-caps  600  12pts/1.5  Courier }
    p { font:  italic  small-caps  600  12pts/18pts  Courier }
    p { font:  /18pts  serif; } p { font:  oblique  100  24pts } oder

    .kurz { font: 600 small-caps 18pt/24pt fantasy}
     ...
    <span class="kurz">kurz und b&uuml;ndig</span>

#### Darstellung

kurz und bündig

↑

aural Stile für die Sprachausgabe

border Stile für die Gestaltung eines Rahmens um ein Element

color und background Stile für die Vordergrundfarbe und Hintergrundgestaltung

content Stile für automatisch generierten Inhalt

dimension Stile für die Abmessungen und Ausrichtung von Elementen

font Stile für die Schriftgestaltung

lists and markers Stile für Aufzählungen und Listen

margin Stile für den Abstand eines Elements gegen umgebende Elemente

padding Stile für den inneren Abstand zum Element

paged media Stile für den Druck

positioning Stile für die Positionierung

Pseudoklassen und Pseudoelemente Stile für die Gestaltung von Pseudolinks und Pseudoelementen

table Stile für die Gestaltung von Tabellen

text Stile für die Absatzgestaltung

user interface Stile für die Gestaltung der Benutzeroberfläche durch Rahmen und Mauszeiger

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen