2.4.3 Schriftart (font-family)

1 Allgemein

a) Beispiele von Schriftarten

(Es sind eventuell aber nicht alle auf dem dem Computer verfügbar)

• Arial
• Arial Black
• Avantgarde
• Balloon
• Bodoni
• Comic Sans MS
• Courier New
• MS Courier New
• Garamond
• Helvetica
• Impact
• Times New Roman
• Times Roman
• Trebuchet
• Verdana
• Wide Latin

b) Generische Schriftfamilien

Diese generische Schriftfamilien gehören auch zu den Schriftfamilien

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

c) Wichtige Hinweise für die Formatierung

• Bei font-family: empfiehlt es sich mehrere Schriftarten anzugegeben.
  Ist die erste Schriftart nicht verfügbar, wird automatisch die nächste verwendet.
• Als letzte Schriftart soll eine übliche generische Schritart (sans-serif oder serif) angegeben werden, damit der Browser selbst eine Schrift aussuchen kann, wenn die anderen nicht verfügbar sind.
• Die verschiedenen Attribute sind durch Strichpunkt getrennt.
  Mehrere Schriftartennamen sind aber durch Kommata zu trennen.
• Das W3-Konsortium empfiehlt, Schriftartnamen, die Leerzeichen enthalten, in Anführungszeichen zu setzen, also z.B. font-family:"Century Schoolbook",Times. Sie können dazu die doppelten oder die einfachen Anführungszeichen (Hochkomma) verwenden. Falls die CSS-Eigenschaften innerhalb eines style-Attributs im HTML-Quelltext vorkommen, dürfen nicht die gleichen Anführungszeichen verwendet werden wie bei der HTML-Attributzuweisung. In den Beispielen stehen die Wertzuweisung an das style-Attribut in doppelten Anführungszeichen, Innerhalb davon werden für 'Times New Roman' deshalb einfache Anführungszeichen verwendet, um Konflikte zu vermeiden.

d) Test der auf dem Computer installierten Schriftarten

Gemäss nachfolgendem Test 1 sind auf meinem Computer folgende Schriften installiert:

Arial, Arial Black, Arial Narrow, Book Antiqua, Bookman Old Style, Bookshelf Symbol 7, Century Gothic, Comic Sans MS, Courier, Courier New, Estrangelo Edessa, Franklin Gothic Medium, Garamond, Gautami,Georgia, Impact, Latha, Lucida Console, Lucida Sans Unicode, Mangal, Marlett, Microsoft Sans Serif, Modern, monospace, Monotype Corsiva, MS Outlook, MS Reference Sans Serif, MS Reference Specialty, MS Sans Serif, MV Boli, Palatino Linotype, Raavi, sans-serif, Script, serif, Shruti, Sylfaen, Symbol, Tahoma, Terminal, Times New Roman, Trebuchet MS, Tunga, Verdana, Webdings, Wingdings, Wingdings 2, Wingdings 3, ZWAdobeF Browser "Opera 8.54 / Windows NT", 0x0, "jsunitid=%26; Apache=86.213.113.154.62031147613023348", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; de) Opera 8.54", "Zurich Light Extra Condensed BT",

• VisiBone: Automated Font Survey
  VisiBone: Font Test #1 (auf dem Computer installiert)
  VisiBone: Font Test #2 (vom Browser erkannte Schriftarten)
  VisiBone: Survey Results (weltweit)
  VisiBone: Master List (vorhandene Schriftarten)

e) Workshops

• Stichpunkt: Welche Schriftarten kann man im Web einsetzen?
  Stichpunkt: Testseite zur Schriftformatierung
  Stichpunkt: Testseite zur Zeilenbreite

• Microsoft: Fonts and products

2 Formatierung der Schriftart im HTML-Textbereich

a) Beispiel 1

<p>
<span style="font-family:'Times New Roman',Times,serif">
kleiner Beispieltext in Times New Roman
</span>
<span style="font-family:'Times New Roman,Times',
serif;font-size:120%">
grosser Beispieltext in Times New Roman
</span>
</p>

• kleiner Beispieltext in Times New Roman
  grosser Beispieltext in Times New Roman

• kleiner Beispieltext in Verdana
  grosser Beispieltext in Verdana

• kleiner Beispieltext in Wide Latin
  grosser Beispieltext in Wide Latin

• kleiner Beispieltext in Comic Sans MS
  grosser Beispieltext in Comic Sans MS

• kleiner Beispieltext in Avantgarde
  grosser Beispieltext in Avantgarde

• kleiner Beispieltext in Balloon
  grosser Beispieltext in Balloon

• kleiner Beispieltext in Bodoni
  grosser Beispieltext in Bodoni

• kleiner Beispieltext in Garamond
  grosser Beispieltext in Garamond

• kleiner Beispieltext in Impact
  grosser Beispieltext in Impact

• kleiner Beispieltext in Helvetica
  grosser Beispieltext in Helvetica

• SELFHTML: Schriftart (font-family)
• SELFHTML: Beispieltext

b) Beispiel 2

<p style="font-family:Arial Black;">
 Dies sollte die Schriftart Arial Black sein,
 weitere Beispiele wie folgt:
</p>

Dies sollte die Schriftart Arial Black sein, weitere Beispiele wie folgt:

• Dies sollte die Schriftart Arial sein.

• Dies sollte die Schriftart Verdana sein.

• Dies sollte die Schriftart Courier New sein.

• Dies sollte die Schriftart serif sein, z.B.: Times New Roman, Bodoni, Garamond,...

• Dies sollte die Schriftart sans-serif sein;z.B.: Arial, Verdana, Trebuchet, Avant Garde,...

• Dies sollte die Schriftart cursive sein. Schriften, die eher geschrieben als gedruckt aussehen.

• Dies sollte die Schriftart monospace sein, z.B.: Courier, MS Courier New,...

• Dies sollte die Schriftart fantasy sein. Dies sind ausgeschmückte Schriften.

• CSS 4 You: Schriftart (font-family)
  CSS 4 You: Beispiel

3 Formatierung der Schriftart im CSS-Stylesheet

⇒ Siehe auch unter CSS-Stylesheet "Bemerkungen zu Angaben im Stylesheet"

a) Beispiel 1: html und body

Mit dieser Formatierung im Stylesheet werden alle nicht anders formatierten Texte formatiert.

Angegeben werden eine oder besser mehrere Schriftarten und/oder Schriftfamilien.
Der Browser probiert alle durch und wählt die Erste, die auf dem Anwendersystem installiert ist.

body {background:#FFFFFF;color:#000000;
font-family:Verdana,Helvetica,sans-serif;
font-size:100.1%;}

b) Beispiel 2: Überschriften

Mit der Formatierung im Stylesheet werden alle Überschriften 1. Ordnung so formatiert.
(Wenn die gleiche Schriftart verwendet werden soll, die bereits im "body" angegeben ist, ist eine Angabe nicht mehr sinnvoll)

h1 { font-size:1.69em;font-weight:bold;
letter-spacing:0.1em;background:transparent;color:red;}

c) Beispiel 3: für alle mit <pre>formatierten Abschnitte

pre {font-family: monospace;}

d) Beispiel 4: Generische Schriftfamilien (generic-family)

Folgende generische Schriftfamilien sind fest vordefiniert
Diese Angaben können Sie also neben Schriftartnamen benutzen:

• serif = eine Schriftart mit Serifen (z.B. Times New Roman)
• sans-serif = eine Schriftart ohne Serifen (z.B. Arial, Helvetica, Verdans),
• cursive = eine Schriftart für Schreibschrift (z.B. Zapf-Chancery),
• fantasy = eine Schriftart für ungewöhnliche Schrift (z.B. Western),
• monospace = eine Schriftart mit dicktengleichen Zeichen (z.B. Courier)

Wichtig:
Es empfiehlt sich, solche generische Schriftarten als letzte Angabe einer Wertzuweisung an font-family zu notieren.

Damit bieten Sie dem Browser die Chance, eine Schriftart auszuwählen, die zumindest vom Typ her der gewünschten entspricht, falls diese auf dem System nicht vorhanden ist.

Achtung:
Die verschiedenen Attribute sind durch Strichpunkt getrennt, bei font-family: werden aber die Möglichkeiten durch Komma getrennt.

Bei folgenden Beispielen wurde bei der Schriftftart 'nichts' angegeben. Der Browser sucht sich dann die Schriftfamilie nach der angegebenen generischen Schrifart selbst aus.

e) Beispiel 5: sans-serif

<p style="font-family:'nichts',sans-serif;
 font-size:12pt;color:blue">
 Diese Schrift heisst <p style="font-family:'nichts',
 sans-serif;font-size:12pt;color:blue">
</p>

Diese Schrift heisst <p style="font-family:'nichts',sans-serif;font-size:12pt;color:blue">

f) Beispiel 6: serif (mit serif)

<p style="font-family:'nichts',serif;font-size:14pt;
 color:green">
 Diese Schrift heisst <p style="font-family:'nichts',
 serif;font-size:12pt;color:green">
</p>

Diese Schrift heisst <p style="font-family:'nichts',serif;font-size:12pt;color:green">

g) Weitere Workshops

• W3C Recommendation - CSS2.1 Specification: font-family

• W3Schools: Beispiel: Set the font of a text

• Web Design Group: Syntax: font-family

4 Schriften-Downloads

• TheFreeSite.com: Free Font Resources

• Schriften.com: Schriften & Fonts

↑