Die CSS font-Eigenschaft definiert die Schrift-Familie, Fettdruck, Grösse und den Stil des Textes.
Unterschied zwischen Serif und Sans-serif Schriftarten.
Beachte: Sans-serif Schriftfamilien haben kleine Verzierungen am Ende des Zeichen(orange):
CSS Font-Familie
generische Familie-Familien mit ähnlichem Aussehen (wie "Serif" oder "Monospace")
Schrift-Familien(wie "Times New Roman" oder "Arial")
Generische Familie
Font-Familie
Beschreibung
Serif
Times New Roman , Georgia
Serif-Schriftarten haben kleine Verzierungen am Ende jedes Zeichen
Sans-serif
Arial , Verdana
"Sans" bedeutet, diese Schrifarten haben keine Verzierungen am Ende jedes Zeichen
<p class="serif">Dieser Absatz hat die Schrifart Times New Roman.</p>
<p class="sansserif">Dieser Absatz hat die Schrifart Arial.</p>
<p class="monospace">Dieser Absatz hat die Schrifart Lucida Console.</p>
</body>
</html>
Font Style(Stil)
Die font-style Eigenschaft wird meistens verwendet um kursiven Text zu bestimmen.
Diese Eigenschaft hat drei Werte:
normal.
italic-Style dargestellt.
oblique(ähnlich kursiv).
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">Dieser Absatz wird normal dargestellt.</p>
<p class="italic">Dieser Absatz wird kursiv dargestellt.</p>
<p class="oblique">Dieser Absatz wird geneigt(ähnlich kursiv) dargestellt.</p>
</body>
</html>
Font-Weight(Darstellungs-Gewichtung)
Die font-weight Eigenschaft spezifiziert die Gewichtung einer Schriftart:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">Diese ist ein Absatz.</p>
<p class="light">Diese ist ein Absatz.</p>
<p class="thick">Diese ist ein Absatz.</p>
<p class="thicker">Diese ist ein Absatz.</p>
</body>
</html>
Font-Variante
Die font-variant Eigenschaft bestimmt ob Text in einer small-caps Schrifart dargestellt werden sollen.
In einer small-caps Schriftart, werden alle Kleinbuchstaben konvertiert in Grossbuchstaben.
Die konvertierten Grossbuchstaben erscheinen in kleinerer Grösse als die Original-Grossbuchstaben im Text.
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">Das ist ein Absatz.</p>
<p class="small">Das ist ein weiterer Absatz.</p>
</body>
</html>
Font-Size(Schriftgrösse)
Die font-size Eigenschaft bestimmt die Grösse des Textes.
Der font-size Wert kann eine absolute oder eine relative Grösse aufweisen.
Absolute-Grösse:
bestimmt die Schriftgrösse eines Textes
Absolute Masseinheiten: px, small, medium, large usw. für Schriftgrössen
Erlaubt dem Benutzer nicht die Schriftgrösse zu ändern im Browser (aus Gründen der Barrierefreiheit schlecht)
Relative-Grösse:
legt die Schriftgrösse relative fest zu seinem umgebenden Elementen
Relative Masseinheiten: em, rem, % usw. für Schriftgrössen
Erlaubt dem Benutzer die Schriftgrösse zu ändern im Browser
Bemerke: Wenn du keine Schriftgrösse festlegst, die Vorlagegrösse für normalen Text wie einen Absatz ist 16px (16px=1em).
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 1.75em;
}
p {
font-size: 1rem;
}
</style>
</head>
<body>
<h1>Das ist eine Überschrift 1</h1>
<h2>Das ist eine Überschrift 2</h2>
<p>Das ist ein Absatz.</p>
<p>Bestimmen der Schriftgrösse(font-size) in Prozent oder em , erlaubt es dem Benutzer zu verändern der Schriftgrösse im Browser</p>
</body>
</html>
Um die Schreibweise zu kürzen ist es möglich alle unten aufgeführten Eigenschaften in einer einzigen Eigenschaft zu schreiben.
Die font-Eigenschaften ist eine Kurzschrift für folgende Eigenschaften:
font-style
font-variant
font-weight
font-size/line-height
font-family
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
<h1>Die font-Eigenschaft</h1>
<p class="a">Das ist ein Absatz. Die Schriftgrösse ist 20 Pixel und die Schrift-Family ist Arial.</p>
<p class="b">Das ist ein Absatz. Der Style ist kursiv und fett gedruckt, die Schriftgrösse 12 Pixel, die Liniehöhe(Abstand) 30 Pixel und die Schrift-Familie ist Georgia.</p>
