Schriftarten
Nicht jeder Computer oder jedes Betriebssystem verfügt über die gleichen Schriftarten.
Dieser Faktor muss beim Webdesign unbedingt berücksichtigt werden.
Um die Schriftart zu verändern, können wir die Eigenschaft "font-family" benutzen und mit gewünschten Werten erweitern.
Diesmal sind sogar mehrere Werte erlaubt.
body {
font-family: Arial, Helvetica, Verdana, sans-serif;
}
Die Deklaration in CSS bedeutet, dass der Browser zuerst die Schriftart "Arial" suchen soll. Wenn er die nicht findet, dann soll er nach "Helvetica" schauen, und wenn er auch diese nicht findet, dann soll er nach "Verdana" schauen, wenn auch diese nicht zu finden ist, dann soll er einfach eine Schriftart ohne Häkchen an den Buchstaben verwenden. "Verdana" ist eine Schriftart, die speziell für den Einsatz am Monitor entwickelt wurde und auf fast allen Systemen installiert ist.
Webfonts
Sollte es doch der Fall sein, dass eine ganz besondere Schriftart verwendet werden soll und diese womöglich nicht auf allen Systemen läuft, so kann man auch auf "Webfonts" zurückgreifen.
Achtung!
Hierbei kann es zu rechtlichen Problemen wegen einzelner Lizenzen kommen.
Daher ist es wichtig, sich hier bereits vorher zu informieren, inwieweit die Schriftarten von anderen Servern für eigene Webprojekte verwenden werden dürfen.
Der Internetgigant Google stellt eine großzügige Auswahl an kostenloser und qualitativ hochwertiger Schriftarten unter https://fonts.google.com zur Verfügung.
Schriftgröße
Die Schriftgröße kann einfach mit der Eigenschaft "font-size" geändert werden.
body {
font-size: 2rem;
}
Der CSS-Code erzeugt dabei eine Schrift, die doppelt so groß ist als üblich.
Die Größe kann auch in "%", "em", "rem" oder "px" angegeben werden.
Letter-spacing
Durch den Wert "letter-spacing" können die Abstände zwischen den Buchstaben verändert werden.
body {
letter-spacing: .5rem;
}
Text-align
Mit der Eigenschaft "text-align" können Texte ausgerichtet werden.
body {
text-align: left; /*right, center usw.*/
}
Zeilenhöhe
Mit "line-height" kann die Zeilenhöhe angepasst werden.
body {
line-height: 1.5rem;
}
Schriftschatten
Mit "text-shadow" wird der Text dupliziert und versetzt hinter dem Text erneut ausgegeben.
body {
text-shadow: 1px 1px #ff0000;
}
Der Code erzeugt einen Schatten, der hinter dem ursprünglichen Text um "1 Pixel" nach rechts und um "1 Pixel" nach unten gesetzt wurde. Die Farbangabe lässt den Schatten "rot" darstellen, sollte die Farbangabe ausgelassen werden, so wird als Schattenfarbe die Farbe des Textes verwendet.
Weiter mit Hintergrund