Lektion 4
April 3, 2012
Zeichensatzfamilie: die Eigenschaft ‘font-family’
Die Eigenschaft font-family wird verwendet, um eine priorisierende Liste der Zeichensätze anzugeben, in der ein bestimmtes Element oder eine Webseite angezeigt werden soll. Wenn der erste Zeichensatz nicht auf dem Computer, mit dem die Seite betrachtet wird, installiert ist, wird der nächstfolgende probiert, bis ein vorhandener bzw. passender Zeichensatz gefunden ist.
Es gibt zwei Arten, wie man Zeichensätze kategorisieren kann: Schriftfamilien und generische (gattungsmäßige) Familien. Die beiden Ausdrücke werden nachfolgend erklärt.
- Schriftfamilien
- Beispiele für eine Schriftfamilie (oft auch nur “Schriftart” oder “font” genannt) sind z.B. “Arial”, “Times New Roman” oder “Tahoma”.
- generische Familien
- Generische (oder gattungsmäßige) Familien können wohl am besten als Gruppen von Schriftartfamilien beschrieben werden, die ein ähnliches Aussehen haben. Als Beispiel sei hier “sans-serif” genannt, welches Schriftarten umfaßt, die keine “Füßchen” haben.
Wenn man die Zeichensätze für seine Webseite auflistet, beginnt man im allgemeinen mit dem bevorzugten Zeichensatz und ergänzt dann ein paar Alternativen. Wir empfehlen, dass Sie diese Liste mit einer generischen Familie abschließen. So ist sichergestellt, dass zumindest ein Zeichensatz der gleichen Familie zur Darstellung der Seite herangezogen wird, wenn keine der angegebenen Zeichensätze vorhanden ist.
Ein Beispiel für solch eine priorisierende Liste der Zeichensätze könnte wie folgt aussehen:
h1 {
font-family: arial, verdana, sans-serif;
}
h2 {
font-family: "Times New Roman", serif;
}
Überschriften, die mit <h1> markiert wurden, werden in der Schrift “Arial” angezeigt. Falls dieser Zeichensatz nicht auf dem Computer des Nutzers installiert ist, wird stattdessen “Verdana” verwendet. Sollten beide Schriften nicht verfügbar sein, wird ein Zeichensatz aus der sans-serif-Familie für die Überschriften benutzt.
Bitte beachten Sie, dass Schriftartnamen, die Leerzeichen enthalten, in Anführungsstrichen geschrieben werden müssen. Siehe "Times New Roman" im obigen Beispiel.
Schriftstil: die Eigenschaft ‘ font-style ’
Die Eigenschaft font-style weißt dem betreffenden Element die Stile normal (kein Stil), italic (kursiv) oder oblique (schräg) zu. Im folgenden Beispiel werden alle Überschriften, die mit <h2> markiert sind, kursiv geschrieben.
h1 {
font-family: arial, verdana, sans-serif;
}
h2 {
font-family: "Times New Roman", serif;
font-style: italic;
}
Schriftvarianten: die Eigenschaft ‘ font-variant ‘
Mit der Eigenschaft font-variant kann man zwischen normal oder small-caps wählen. Bei small-caps benutzt die Schriftart anstatt der Kleinbuchstaben (lower-case), kleiner geschriebene Großbuchstaben (upper-case).
h1 {
font-variant: small-caps;
}
h2 {
font-variant: normal;
}
Schriftgewichtung: die Eigenschaft ‘ font-weight ’
Mit der Eigenschaft font-weight gibt man an, wie fett oder “schwer” eine Schriftart angezeigt werden soll. Eine Schrift kann entweder normal oder bold (fett) dargestellt werden. Einige Browser unterstützen auch die Angabe der Zahlen 100-900 (nur volle Hunderter) um eine feiner abgestufte Darstellung zu erreichen.
p {
font-family: arial, verdana, sans-serif;
}
td {
font-family: arial, verdana, sans-serif;
font-weight: bold;
}
Schriftgröße: die Eigenschaft ‘ font-size ’
Die Schriftgröße wird durch die Eigenschaft font-size festgelegt.
Man kann viele verschiedene Einheiten (z.B. Pixel und Prozentwerte) verwenden um die Größen zu beschreiben. In diesem Tutorial werden wir uns auf die meistgebrauchten und zweckmäßigsten Einheiten konzentrieren. Beispiele sind:
h1 {
font-size: 30px;
}
h2 {
font-size: 12cm;
}
h3 {
font-size: 120%;
}
p {
font-size: 1em;
}
Es gibt einen grundlegenden Unterschied zwischen den vier obigen Einheiten. ‘px’ und ‘pt’ bringen die Schrift auf eine absolute Größe, während es ‘%’ und ‘em’ dem Nutzer erlaubt, die Größe so zu verändern, dass es ihm/ihr passend erscheint. Viele Internetnutzer sind behindert, älter, sehbehindert oder ‘leiden’ unter der schlechten Qualität Ihres Monitors. Um Ihre Webseite für jederman zugänglich zu machen, sollten Sie veränderbare Einheiten, wie ‘%’ oder ‘em’, verwenden.
Kombination der vorgenannten: die Eigenschaft ‘ font ’
Mit Hilfe der font-Eigenschaft können Sie alle Schrift-Eigenschaften in dieser einen Eigenschaft vereinen.
Stellen Sie sich z.B. die folgenden vier Codezeilen vor, die die Schrifteigenschaften für <p> angeben:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Wenn man diese Kombination verwendet, kann der Code vereinfacht werden:
p {
font: italic bold 30px arial, sans-serif;
}
Die Reihenfolge der Werte für font ist:
[font-style] | [font-variant] | [font-weight] | [font-size] | [font-family]
