2.4.2 Schrift (font)

1 Prinzip der Formatierung mit separaten Attributen

a) Attribute

• Schriftart (font-family)
• Schriftgrösse (font-size)
• Schriftgewicht (font-weight)
• Schriftvariante (font-variant)
• Schriftstil (font-style)
• Schriftlaufweite (font-stretch)
• Zeichenabstand (letter-spacing)
• Wortabstand (word-spacing)

b) Beispiel

⇒ Hinweise für die Formatierung: siehe Schriftart (font-family)

<p style="font-family:'Times New Roman',serif;
 font-size:14pt;color:blue">
 Diese Schrift heisst "font-family:'Times New Roman',serif;
 font-size:14pt;color:blue"
</p>

Diese Schrift heisst <p style="font-family:'Times New Roman',serif;font-size:14pt;color:blue">

c) Grundlagen

• SELFHTML: Schriftformatierung

• W3C Recommendations - CSS2.1 Specification: Fonts

• W3Schools: CSS2-Reference: Font
  W3Schools: CSS2-Referenz: Text
  W3Schools: Beispiel: Control the letters in a text

• Web Design Group: Font Properties

d) Workshops

⇒ Siehe "Schriftarten"

2 Kurzform der Schriftformatierung

a) Attribute

Kurzform der Schriftformatierung, die die sechs einzelnen Eigenschaften zusammenfasst.

⇒ Wichtig:Die folgende Reihenfolge ist einzuhalten, "font-family" ist also beispielsweise als letzte Eigenschaft zu notieren.

• font-style = Schriftstil
• font-variant = Schriftvariante
• font-weight = Schriftgewicht
• font-size = Schriftgrösse
• line-height = Zeilenabstand
• font-family = Schriftart

b) Beispiel 1: Formatierung im Textbereich

<p style="font:bold 12pt Arial">
	Dies sollte Schriftart Arial, fett, 12pt sein
</p>

Dies sollte Schriftart Arial, fett, 12pt sein

• CSS 4 You: Schrift (font)
  CSS 4 You: Beispiel

c) Beispiel 2: Formatierung mit dem ID-Attribut

1) Angabe im Stylesheet: (die Stylesheetangaben sind im Kopf dieser Datei)

/* Dies wird fuer Beispiel in Anleitung verwendet*/
#Textbeispiel01 {font:bold 16px 'Times New Roman';}

2) Angabe im Quelltext des HTML-Dokumentes:

<p id="Textbeispiel01">
Beispieltext mit Schrift: bold 16px
Times New Roman </p>

3) Im HTML-Dokument erscheint dann:

Beispieltext mit Schrift: bold 16px Times New Roman

• SELFHTML: font (Schrift allgemein)
  SELFHTML: Beispieltext

d) Beispiel 3: mit Style-Angaben im Kopf des HTML-Dokumentes

• W3Schools: Beispiel: All the font properties in one declaration

e) Beispiel 4: Angabe im HTML-Textdokument

<p style="font: italic bold 12pt/14pt Times, serif">
 Dies ist eine Formatierung der Schrift (12pt)
 einschliesslich Zeilenabstand (14pt)</p>

Dies ist eine Formatierung der Schrift (12pt) einschliesslich Zeilenabstand (14pt)

• Web Design Group: Syntax: Font - Possible values (mit Beispiel)

↑