Beispiel:CSS2 font.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css"> <title>font</title> <style> .formatiert { color: #333; }
.formatiert h2 {font-family: "Comic Sans MS", cursive, sans-serif; background: LightGreen;
} .formatiert span { white-space: nowrap; color: green; }
.formatiert p { font: bold .9em/150% Georgia, Times, serif; color: #666; }
.formatiert code { font: 1.2em/150% Courier, monospace; color: #999; } </style> </head> <body>
Die Eigenschaft font
HTML-Markup ohne CSS
Ohne weitere CSS-Formatierungen verwenden Browser ein eigenes Stylesheet, in dem die einzelnen Textstrukturierungselemente ihre eigenen Festlegungen haben.</b>
Dies betrifft:
- Schriftgröße
font-size - Schriftfamilie
font-family - Neigung
font-style - Strichstärke
font-weight - Schriftfarbe
color
<article class="formatiert">
HTML-Markup mit CSS
Die Angaben zur verwendeten Schrift lassen sich vielfältig kombinieren.
Für diesen Absatz gilt zum Beispiel:
{font: bold 0.9em/150% Georgia,Times,serif;}
</article>
Untersuche die Schriftformatierung im <a href="https://wiki.selfhtml.org/wiki/Arbeiten_mit_dem_Seiteninspektor#Farben_und_Kontraste">Seiteninspektor</a>.
Achte auf die Kontraste!</h2>
<p>Zum Tutorial: <a href="https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung">Typografie/Schriftformatierung</a>.
Zurück zum
Adventskalender 2024.
</body> </html>
