Diese Dokumentation ist stark vereinfacht und beschränkt sich auf die wesentlichen Grundlagen.

Schrift

Die wesentlichen Angaben zur Schrift ist dessen Name, der Stil sowie die Farbe.

font-family

Angabe einer bestimmten Schriftfamilie wie Helvetica oder Times.
Angabe einer generischen Schriftfamilie.

serif: Schriftart mit Serifen wie z.B. Times
sans-serif: Schriftart ohne Serifen wie z.B. Helvetica
cursive: eine Schriftart für Schreibschrift
fantasy: eine Schriftart für ungewöhnliche Schrift
monospace: eine Schriftart mit dickengleichen Zeichen, wie z.B. Courier

Bedenken Sie, eine bestimmte Schriftfamilie wie z.B. Helvetica kann der Browser nur darstellen wenn diese Schrift auch auf dem Computer des Anwenders installiert ist. Auf diese Weise funktionieren nur Schriften zuverlässig die weit verbreitet sind. Geben Sie deshalb immer mehrere Schriften als Alternative an, zum Schluss immer die passende generische Schriftfamilie. Der Browser sucht der Reihe nach das System nach den Schriften ab und wird im Zweifelsfall die Generische verwenden.

Verwenden Sie Google Fonts um auf Ihrer Webseite

font-size

Angabe der Schriftgrösse, absolut oder relativ. Angaben in px oder em. Für die Darstellung am Bildschirm sollten Sie em bevorzugen. 1em entspricht der im Browser eingestellten Standardgrösse. Die Verwendung von font-size: 1em; im wird automatisch verwendet, auch wenn Sie es im CSS nicht explizit angeben. Mit 2em, 2.5em geben Sie an um wieviel grösser der Text als der Standardtext sein soll.

 font-weight

Mit font-weight definieren Sie die Strichstärke der Schrift.

lighter: dünner als im Elternelement
normal: normale Strichstärke
bold: fett
bolder: fetter als im Elternelement
inherit: Strichstärke des Elternelements
100, 200, 300, 400, 500, 600, 700, 800, 900: extra-dünn (100) bis extra-fett (900)

font-style

Mit font-style geben Sie die Neigung der Schrift an.

normal: normaler Schriftstil
italic: kursiver Schriftstil
oblique: schräg gestellter Schriftstil
inherit: Schriftstil des Elternelements

Zwischen italic und oblique werden sie kaum einen Unterschied feststellen. Bei italic wird auf eine kursive Schrift zurück gegriffen, bei oblique wird die normale Schrift schräg gestellt. Ist bei der Angabe von italic keine kursive Schrift verfügbar, wendet der Browser oblique an.

font-variant

Mit font-variant wird die Schrift mittels Kapitälchen (kleine Grossbuchstaben statt Kleinbuchstaben) dargestellt.

normal: normaler Schriftstil
small-caps: Kapitälchen
inherit: Schriftstil des Elternelements.

line-height

Mit line-height legen Sie die Zeilenhöhe fest. Je grösser der Wert, um so grösser der Abstand zwischen den Textzeilen.

Fliesskommazahl oder Prozentangabe
Längenangabe: Zoll, Pica, Punkt, cm und mm
normal: Browsereinstellung, in der Regel zwischen 1.25 und 1.4
inherit: Zeilenhöhe des Elternelements

color

Mit color geben Sie die Schriftfarbe an.

#00FF00: Farbcode
transparent: unsichtbar, macht das Sinn?
inherit: Farbe des Elternelement

text-shadow

Vor CSS 3 konnte man Schriften mit Schatten nur als Grafik einsetzen.

Erster Wert: Versatz des Schattens nach rechts.
Zweiter Wert: Versatz des Schattens nach unten.
Dritter Wert: bestimmt die Härte des Schattens. Je grösser der Wert um so weicher der Schatten.
Vierter Wert: die Farbe des Schattens.

@font-face

Mit @font-face können Sie zusätzliche Schriften integrieren. Das können Google Fonts sein oder Schriften die Sie auf Ihrer Webseite bereit stellen. Der Vorteil liegt darin, dass genau die Schriften auch angezeigt werden die sie wollen, auch ausgefallenere Schriften die nicht zum Standard der gängigen Betriebssysteme gehören.

Die einfachere Variante ist Google. Sie brauchen lediglich eine Zeile Code in den Header zu integrieren, der Rest macht Google für Sie.

<link href=”https://fonts.googleapis.com/css?family=Saira+Extra+Condensed” rel=”stylesheet”>

Und so notieren Sie die Schrift in Ihrem CSS:

font-family: ‘Saira Extra Condensed’, sans-serif;

Die Google Fonts finden Sie unter fonts.google.com/.

Besser ist es jedoch, wenn Sie die Schriften auf ihren Server laden. Dabei müssen Sie jedoch beachten, dass die Schrift in unterschiedlichen Formaten vorliegen muss, damit das auch mit allen Browsern klappt.

Beachten Sie, dass Sie die Lizenz für die Schrift besitzen, oder dass Sie eine Lizenzfreie Schrift verwenden.