Festlegen der Schriftart über CSS
Sie können mit CSS direkt eine Schrift auswählen und die Schriftart mit der CSS-Anweisung font-family: festlegen. Wenn wir für alle Überschriften die Schriftart Vivaldi wollen, sieht die Anweisung wie folgt aus.
h1 {
font-family: Vivaldi;
}
Dass dies allerdings keine gute Idee ist, wird spätestens klar, wenn Sie dann die Website auf einem anderen Computer ansehen, bei dem gerade diese Schriftart nicht installiert ist. Es wird eine Ersatzschrift vom System ausgewählt, die u.U. gar nicht passt. Daher gibt man zusätzlich zu der ersten gewünschten Schrift noch Alternativschriften an: Wenn Vivaldi nicht installiert ist, dann schau mal nach „Brush Script“. Die Schriften werden in der CSS-Anweisung mit einem Komma getrennt. Es wird erst nach der ersten gesucht, ist diese nicht vorhanden, wird nach der zweiten gesucht. Weil ein Leerzeichen in unserer Beispielschrift ist, muss dieser mit Anführungszeichen geschrieben werden.
h1 {
font-family: Vivaldi, "Brush Script";
}
Ist nun diese Schrift ebenfalls nicht auf dem Rechner installiert, ist es eine gute Idee, die allgemeine Schriftfamilie anzugebenen, also für unser Beispiel wäre das „fantasy“. Somit wählt das System irgendeine Zierschrift aus.
h1 {
font-family: Vivaldi, "Brush Script", fantasy;
}
Das gilt nicht nur für Zierschriften, die oft nicht installiert sind. Ebenso sollte bei den Allerweltsschriften die allgemeine Schriftart angegeben werden.
h1 {
font-family: Arial, sans-serif;
}
Dass man aus Allerweltsschriften auch etwas Ansprechendes machen kann, zeigen die folgenden Möglichkeiten für die Gestaltung von Schrift über CSS in den folgenden Kapiteln.
Es soll nicht verschwiegen werden, dass wir auch externe Schriften nutzen können wie beispielsweise Google Fonts: https://www.google.com/fonts
Die Fonts sind in der Regel frei verwendbar unter dem SIL Open Font License (OFL). Mehr dazu können Sie auf der Website lesen.
Hier kann man sich auf der Plattform die Schrift ansehen und mit dem Icon „Quick Use“ erhält man alle Links, die man in die Website einbinden muss, damit der Font genutzt wird. Allerdings ist so natürlich für den Drittanbieter Google abschätzbar, wie oft auf die Website zugegriffen wird und mehr. Hier ist es auch immer eine Frage inwieweit sensible Daten auf der Website sind – Seiten von Krankenhaus etc. sind somit nicht dafür geeignet.
- Startseite
- Video-Kurs
- HTML lernen
- CSS lernen
- Einbinden von CSS
- Aufbau CSS-Anweisung
- CSS kontrollieren mit CSS-Validator
- CSS und Farbe
- Schriften mit CSS gestalten
- Rahmen in CSS
- CSS Box Modell Hierarchie
- Hintergrundbilder mit CSS
- CSS-Selektoren
- Layout über CSS
- horizontale Navigation
- einfache vertikale Steuerung
- Tabellen mit CSS formatieren
- Formulare über CSS gestalten
- Erklärung zu display
- CSS Tipps und Tricks
- Webhosting u. Domain
- Werkzeuge
- Rund um Websites
- Impressum
hier klicken für
mehr Informationen