Typografisches Design ist ein entscheidender Bestandteil eines erfolgreichen Website-Designs. Websites mit leicht lesbarem und gut aussehendem Text zu erstellen, ist das Ziel eines jeden Webdesign-Profis. Um dies zu erreichen, müssen Sie die spezifischen Schriftarten einstellen können, die Sie auf Ihren Webseiten verwenden möchten. Um das Schriftbild oder die Schriftfamilie in Ihren Webdokumenten anzugeben, verwenden Sie die Stileigenschaft font-family in Ihrem CSS.
Der unkomplizierteste Schriftfamilienstil, den Sie verwenden könnten, würde nur eine Schriftfamilie umfassen:
p {
Schriftfamilie: Arial;
}
Wenn Sie diesen Stil auf eine Seite anwenden, werden alle Absätze in der Schriftfamilie "Arial" angezeigt. Das ist großartig und da "Arial" eine sogenannte "websichere Schriftart" ist, bedeutet dies die meisten (wenn nicht alle) Computer installiert haben würden, können Sie sich beruhigt zurücklehnen, da Sie wissen, dass Ihre Seite in der beabsichtigten Schriftart.
Was passiert also, wenn die von Ihnen ausgewählte Schriftart nicht gefunden wird? Wenn Sie beispielsweise auf einer Seite keine "websichere Schriftart" verwenden, was macht dann der Benutzeragent, wenn diese Schriftart nicht vorhanden ist? Sie machen einen Ersatz.
Dies kann zu einigen amüsant aussehenden Seiten führen. Ich bin einmal zu einer Seite gegangen, auf der mein Computer sie vollständig in "Wingdings" (einem Icon-Set) anzeigte, weil mein Computer keine hatte die Schriftart, die der Entwickler angegeben hatte, und mein Browser hat eine miserable Wahl getroffen, welche Schriftart er verwenden würde Ersatz. Die Seite war für mich völlig unlesbar! Hier kommt ein Font-Stack ins Spiel.
Trennen Sie mehrere Schriftfamilien mit einem Komma in einem Schriftstapel
Ein "Schriftenstapel" ist eine Liste von Schriftarten, die Ihre Seite verwenden soll. Sie würden Ihre Schriftartenauswahl in die Reihenfolge bringen, in der Sie sie bevorzugen, und sie durch ein Komma trennen. Wenn der Browser nicht die erste Schriftfamilie in der Liste hat, versucht er die zweite und dann die dritte usw., bis er eine auf dem System findet.
Schriftfamilie: Pussycat, Algerier, Broadway;
Im obigen Beispiel sucht der Browser zuerst nach der Schriftart "Pussycat", dann nach "Algerian" und dann nach "Broadway", wenn keine der anderen Schriftarten gefunden wurde. Dies gibt Ihnen eine größere Chance, dass mindestens eine Ihrer ausgewählten Schriftarten verwendet wird. Es ist nicht perfekt, weshalb wir unserem Font-Stack noch mehr hinzufügen können (lesen Sie weiter!).
Als letztes generische Schriftarten verwenden
So können Sie einen Schriftartenstapel mit einer Liste von Schriftarten erstellen und haben trotzdem keine, die der Browser finden kann. Sie möchten nicht, dass Ihre Seite unlesbar erscheint, wenn der Browser eine schlechte Ersatzwahl trifft. Zum Glück hat CSS auch dafür eine Lösung, und sie heißt generische Schriftarten.
Sie sollten Ihre Schriftartenliste (auch wenn es sich um eine Liste einer Familie oder nur websichere Schriftarten handelt) immer mit einer generischen Schriftart beenden. Es gibt fünf, die Sie verwenden können:
- Kursiv
- Fantasie
- Monospace
- Serifenlos
- Serifen
Die beiden obigen Beispiele könnten geändert werden in:
Schriftfamilie: Arial, serifenlos;
oder.
Schriftfamilie: Pussycat, Algerier, Broadway, Fantasy;
Einige Schriftfamiliennamen bestehen aus zwei oder mehr Wörtern
Wenn die Schriftfamilie, die Sie verwenden möchten, aus mehreren Wörtern besteht, sollten Sie sie in doppelte Anführungszeichen setzen. Während einige Browser Schriftfamilien ohne Anführungszeichen lesen können, kann es zu Problemen kommen, wenn der Leerraum komprimiert oder ignoriert wird.
Schriftfamilie: "Times New Roman", Serifen;
In diesem Beispiel sehen Sie, dass der Schriftname "Times New Roman", der aus mehreren Wörtern besteht, in Anführungszeichen eingeschlossen ist. Dies teilt dem Browser mit, dass alle drei dieser Wörter Teil dieses Schriftartnamens sind, im Gegensatz zu drei verschiedenen Schriftarten, die alle aus einem Wort bestehen.