Webseitenbau
Home
Site/Index
 
Web Webseitenbau
Google English français  
⬆2. 4. 4 Schriftart (font-family)

2.4.4 Schriftart
en Font-family
fr Famille de polices

-

⇧ 1 Allgemein

-

↑ a) Beispiele von Schriftarten

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

-

↑ b) Generische Schriftfamilien

Diese generische Schriftfamilien gehören auch zu den Schriftfamilien

-

↑ c) Wichtige Hinweise für die Formatierung

-

↑ 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",

-

↑ e) Font-Produkte inkl. Downloads

Fonts and products

Downloads

-

⇧ 2 Formatierung der Schriftart im HTML-Textbereich

-

↑ a) Beispiel 1: Formatierung der Schriftart im HTML-Textbereich

1) Angabe im Quelltext 

<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>

2) Ausgabe im HTML-Dokument

-

↑ b) Beispiel 2

1) Angabe im Quelltext

Beipiel des ersten Eintrages: 

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

2) Ausgabe im HTML-Dokument

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

-

⇧ 3 Formatierung der Schriftart im CSS-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%;}

Pfeil nach rechts (Icon) 120 x 120 Pixel CSS: Formatierung von <body>

-

↑ 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

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">

-

⇧ 4 Websites

↑