2.4.3 Schrift (Schriftschnitt)
en Font
fr Fonte de caractères

• 1 Bezeichnungen
• 2 Prinzip: Formatieren mit Attributen
• 3 Formatieren der Schrift im Text
  • Beispiel 1 <p style="font-family:'Times New Roman',serif;...">
  • Beispiel 2
  • Beispiel 3
• 4 Formatieren der Schrift mit Stylesheet (CSS)
  • Beispiel 1 <style type="text/css">...{font:bold 16px...';}</style>
  • Weitere Beispiele
• 5 Websites

-

⇧ 1 Bezeichnungen

Die Eigenschaft font ist eine Zusammenfassung der möglichen Einzelangaben font-style, font-variant, font-weight, font-size, line-height und font-family.

• SELFHTML-Wiki
  de font (Zusammenfassung der möglichen Einzelangaben)
  de Beispiel ansehen

-

⇧ 2 Prinzip: Formatieren mit Attributen

Mit font kann man verschiedene Schriftformatierungen kombinieren.

• Schriftart (font-family)

• Schriftgrösse (font-size)

• Strichstärkee (font-weight)

• Schriftvariante (font-variant)

• Schriftstil (font-style)

• Schriftlaufweite (font-stretch)

• Zeichenabstand (letter-spacing)

• Wortabstand (word-spacing)

-

⇧ 3 Formatieren der Schrift im Text

• Beispiel 1 <p style="font-family:'Times New Roman',serif;...">
• Beispiel 2
• Beispiel 3

-

↑ Beispiel 1 <p style="font-family:'Times New Roman',serif;...">

1) Angabe im Quelltext des HTML-Dokumentes

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

2) Anzeige des HTML-Dokumentes

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

-

↑ Beispiel 2

1) Angabe im Quelltext des HTML-Dokumentes

<p style="font: italic bold 12pt/14pt Times, serif">
 a) Dies ist eine Formatierung der Schrift (12pt)
 einschliesslich Zeilenabstand (14pt)<br>
 b) Paragraphs with a bold and italic Times or serif font with a size of 
 12 points and a line height of 14 points.
</p>

2) Anzeige im HTML-Dokument

a)Dies ist eine Formatierung der Schrift (12pt) einschliesslich Zeilenabstand (14pt)
b) Paragraphs with a bold and italic Times or serif font with a size of 12 points and a line height of 14 points.

-

↑ Beispiel 3

1) Angabe im Quelltext des HTML-Dokumentes

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

2) Anzeige im HTML-Dokument

Dies sollte Schriftart Arial, fett, 12pt sein

-

⇧ 4 Formatieren der Schrift mit Stylesheet (CSS)

Die Angaben erfolgen etweder in einem separaten Stylesheet oder im Kopf der HTML-Datei

• Beispiel 1 <style type="text/css">...{font:bold 16px...';}</style>
• Weitere Beispiele

-

↑ Beispiel 1 <style type="text/css">...{font:bold 16px...';}</style>

1) Angabe der Stylesheetangaben im Kopf dieser Datei

<style type="text/css">
/* Dies wird fuer Beispiel in Anleitung verwendet*/
#Textbeispiel01 {font:bold 16px 'Times New Roman';}
</style>

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

-

↑ Weitere Beispiele

• SELFHTML-Wiki
  de font (Zusammenfassung der möglichen Einzelangaben)
  de Beispiel ansehen

• CSS 4 You de Schrift (font) de Beispiel

• Web Design Group en Font

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

-

⇧ 5 Websites

• SELFHTML-Wiki: CSS/Eigenschaften
  de Schriftformatierung
  

  de font (Zusammenfassung der möglichen Einzelangaben)
  de Beispiel ansehen

  de font-family (Schriftarten)
  de Beispiel ansehen

  de font-style (Schriftstil) de Beispiel ansehen
  

  de font-variant (Schriftvariante) de Beispiel ansehen
  

  de font-size (Schriftgrösse) de Beispiel ansehen
  de Absolute Längenmaße de Relative Längenmaße
  

  de line-height (Zeilenhöhe) de Beispiel ansehen
  

  de font-weight (Strichstärke) de Beispiel ansehen
  

  de font-size-adjust de Beispiel ansehen

  de font-stretch (Schriftlaufweite)
  de Alternative: letter-spacing
  de Beispiel letter-spacing ansehen

  de @font-face

• HTML-Seminar de HTML-Tags für Schriftgrösse
  HTML-Seminar de Punkt/Inch/Millimeter-Umrechner

• W3C Recommendation en Fonts
  W3C Recommendation de Schriften
  

• CSS 4 You de Schrift (font) de Beispiel
  CSS 4 You de Schriftart (font-family) de Beispiel
  CSS 4 You de Schriftgrösse (font-size) de Beispiel

• Web Design Group en Font Properties
  Web Design Group en Font
  Web Design Group en Syntax: font-family
  Web Design Group en Syntax: font-size
  Web Design Group en Syntax: font-weight
  Web Design Group en Syntax: font-variant
  Web Design Group en Syntax: font-style

• W3Schools en Beispiel: All the font properties in one declaration
  W3Schools en Beispiel: Set the font of a text
  W3Schools en Beispiel: Set the size of the font
  W3Schools en Beispiel: Set the boldness of the font
  W3Schools en Beispiel: Control the letters in a text
  W3Schools en Beispiel: Set the variant of the font
  W3Schools en Beispiel: Set the style of the font

↑