Schriftarten spielen eine wichtige Rolle bei der visuellen Attraktivität einer Webseite. Sie können verschiedene Schriftarten für verschiedene Elemente auf einer Webseite verwenden, jedoch die Schriftart in einem Element ändern body ermöglicht das Festlegen des Textstils für das gesamte Dokument, wodurch es konsistenter und professioneller wird.
Mit CSS (Cascading Style Sheets) können Sie die Schriftart für ein Element leicht ändern body. Zuerst müssen Sie eine geeignete Schriftart auswählen, die den Zielen und dem Stil des Projekts entspricht. Sie können dazu viele Schriftarten verwenden, die im Internet verfügbar sind.
Nachdem Sie eine Schriftart ausgewählt haben, fügen Sie den entsprechenden CSS-Code hinzu. So ändern Sie die Schriftart in einem Element body, Sie müssen einen Selektor verwenden body und Eigenschaft font-family. Im Eigenschaftswert font-family geben Sie den Namen der ausgewählten Schriftart oder den durch Kommas getrennten Schriftsatz an. Zum Beispiel:
body font-family: Arial, sans-serif;
>
Dieser CSS-Code ändert die Schriftart für alle Elemente der Webseite, die sich innerhalb des Elements befinden body, auf die Schriftart Arial. Wenn es nicht verfügbar ist, wird eine andere Schriftart aus der angegebenen Liste verwendet.
Wie ändere ich die Schriftart in CSS?
Die Syntax zum Ändern der Schriftart lautet wie folgt:
| Property | Bedeutung |
|---|---|
| font-family | buchstabenname, "zweite Wahl", "dritte Wahl", . |
Sie können mehrere Schriftvarianten angeben, indem Sie sie durch Kommas trennen. Wenn die ausgewählte Schriftart nicht verfügbar ist, wechselt der Browser automatisch zur nächsten Option. Die letzte in der Liste angegebene Option wird verwendet, wenn keine verfügbaren Schriftarten verfügbar sind.
Wenn Sie beispielsweise die Schriftart Arial und die Schriftart Sans-serif festlegen möchten, wenn sie nicht vorhanden ist, können Sie den folgenden CSS-Code verwenden:
In diesem Beispiel werden alle Absätze auf der Seite mit der Schriftart Arial angezeigt, sofern diese auf dem Gerät des Benutzers verfügbar ist. Andernfalls wird der Browser die Sans-Serif-Schriftart verwenden.
Zusätzlich zum Schriftnamen können Sie auch einen generischen Schrifttyp angeben, z. B. serif , sans-serif , cursive , Fantasy oder monospace . Dies kann nützlich sein, wenn Sie eine Schriftart mit einem bestimmten Stil verwenden möchten, aber keinen Zugriff auf eine bestimmte Schriftart haben.
Zum Beispiel wendet der folgende CSS-Code den allgemeinen Schrifttyp "cursive" für alle h1-Header auf einer Seite an:
Jetzt wissen Sie, wie Sie die Schriftart in CSS ändern können. Verwenden Sie die font-family-Eigenschaft, um Ihren Webseiten Stil und Persönlichkeit hinzuzufügen.
Festlegen der Schriftart im Body-Element
Um die Schriftart für alle Elemente im body-Element einer Webseite festzulegen, können Sie die font-family-Eigenschaft in CSS verwenden. Mit dieser Eigenschaft können Sie die Liste der Schriftarten festlegen, die zum Anzeigen von Text verwendet werden sollen.
Wenn Sie beispielsweise die Schriftart Arial für Text in einem Body-Element festlegen möchten, können Sie dem CSS den folgenden Code hinzufügen:
| body |
| font-family: Arial, sans-serif; |
| > |
Wenn in diesem Beispiel die Schriftart Arial nicht verfügbar ist, wird die nach - sans-serif angegebene Schriftart verwendet.
Verwenden der font-family-Eigenschaft
Eigenschaft font-family legt die Schriftart des Textes im Body-Element in CSS fest. Es gibt eine oder mehrere Schriftarten an, die zum Anzeigen von Text innerhalb eines Elements verwendet werden sollen. Sie können für diese Eigenschaft verschiedene Werte festlegen, z. B. den Schriftnamen, den Schriftsatz oder den allgemeinen Schrifttyp.
Eigenschaftswert font-family kann als Name der zu verwendenden Schriftart angegeben werden. Zum Beispiel:
| font-family: Arial; |
Auf diese Weise wird der gesamte Text innerhalb des body-Elements in der Schriftart Arial angezeigt.
Wenn Sie mehrere Schriftarten angeben möchten, die in einer bestimmten Reihenfolge verwendet werden sollen, können Sie sie durch Kommas trennen. Der Browser wird versuchen, die erste Schriftart aus der Liste zu verwenden, wenn sie nicht verfügbar ist, dann die zweite und so weiter. Zum Beispiel:
| font-family: Arial, Helvetica, sans-serif; |
Wenn in diesem Beispiel die Schriftart Arial nicht verfügbar ist, versucht der Browser, den Text in der Schriftart Helvetica anzuzeigen. Wenn es nicht verfügbar ist, wird der allgemeine Schrifttyp sans-serif verwendet. Dadurch wird sichergestellt, dass der Text mindestens in einer Schriftart angezeigt wird.
Sie können auch eine Reihe von Schriftarten verwenden, indem Sie sie durch Kommas trennen und eine bestimmte Schriftart für jede Schriftart angeben. Zum Beispiel:
| font-family: "Arial", sans-serif, "Times New Roman", serif; |
In diesem Beispiel werden drei Schriftarten angegeben: Arial (ohne Angabe des Typs, was bedeutet, dass der generische Typ sans-serif verwendet wird), Times New Roman (mit Angabe des Serif-Typs) und der generische Serif-Schrifttyp. Wenn der Text angezeigt wird, versucht der Browser, die Schriftarten in der angegebenen Reihenfolge zu verwenden.
Mit der font-family-Eigenschaft können Sie die Schriftart für den Text im body-Element Ihrer Wahl festlegen und sicherstellen, dass er auf verschiedenen Geräten und Browsern angezeigt wird. Durch die Kombination verschiedener Schriftarten und Schrifttypen können Sie den gewünschten visuellen Effekt erzielen.
Externe Schriftart anschließen
Sie können eine externe Schriftart verwenden, die vom Server heruntergeladen wird, um die Schriftart im body-Element zu ändern.
Zuerst müssen Sie die passende Schriftart finden und auswählen. Viele Websites bieten kostenlose externe Schriftarten an, die Sie in Ihren Projekten verwenden können. Nach der Auswahl müssen Sie einen Verweis auf die Schriftdatei erhalten.
Um eine externe Schriftart an Ihr Projekt anzuhängen, müssen Sie dem Abschnitt Ihres HTML-Dokuments den folgenden Code hinzufügen:
In diesem Code müssen Sie FontName durch den Namen der ausgewählten Schriftart ersetzen. Um beispielsweise die Schriftart "Roboto" zu verbinden, sieht der Code folgendermaßen aus:
Nachdem Sie den Code hinzugefügt haben, wird die externe Schriftart geladen und kann im Body-Element verwendet werden. Um eine Schriftart anzuwenden, müssen Sie die entsprechende Regel im CSS hinzufügen:
body
In CSS gibt die font-family-Regel den Namen der Schriftart an und gibt, falls nicht verfügbar, eine alternative Schriftart an. In diesem Fall geben wir den Namen der Schriftart an, die wir mit einer externen Referenz verbunden haben, und geben als alternative Schriftart eine serifenlose Schriftart ("sans-serif") an, die verwendet werden soll, wenn die externe Schriftart nicht verfügbar ist.
Nachdem Sie die Seite gespeichert und aktualisiert haben, wird die Schriftart im Body-Element in die ausgewählte externe Schriftart geändert.
Beispiele zum Ändern der Schriftart in CSS
In CSS gibt es mehrere Möglichkeiten, die Schriftart im Body-Element zu ändern. Betrachten wir einige von ihnen:
1. Verwenden der font-family-Eigenschaft:
Die einfachste Möglichkeit, die Schriftart in einem body-Element zu ändern, besteht darin, die font-family-Eigenschaft zu verwenden. Sie können beispielsweise den folgenden Code verwenden, um die Schriftart Arial festzulegen:
font-family: Arial, sans-serif;
In diesem Beispiel haben wir zuerst die Schriftart Arial angegeben und dann das Großwort sans-serif angegeben, das für den Fall verwendet wird, dass Arial nicht verfügbar ist.
2. Externe Schriftarten verwenden:
Sie können die @font-face-Regel verwenden, um Webschriftarten zu verwenden, die im Betriebssystem des Benutzers nicht vorhanden sind. Wenn Sie beispielsweise die Roboto-Schriftart verwenden möchten, die in Google Fonts verfügbar ist, fügen Sie den folgenden Code hinzu:
font-family: Roboto, sans-serif;
In diesem Beispiel haben wir die Roboto-Schriftart mit der @font-face-Regel verbunden und sie dann in der font-family-Eigenschaft des body-Elements angegeben.
3. Verwenden von em-Einheiten:
Mit der em-Maßeinheit können Sie die Schriftgröße relativ zum übergeordneten Element festlegen. Wenn Sie beispielsweise die Schriftgröße auf das 1,2-fache der Schriftgröße des übergeordneten Elements festlegen möchten, können Sie den folgenden Code verwenden:
In diesem Beispiel haben wir die Schriftgröße für das body-Element auf das 1,2-fache der Schriftgröße des übergeordneten Elements festgelegt.
Dies sind nur einige Beispiele dafür, wie Sie die Schriftart im Body-Element mithilfe von CSS ändern können. CSS bietet viele Möglichkeiten zum Anpassen von Schriftarten, und die Auswahl der Methode hängt von Ihren Bedürfnissen und Vorlieben ab. Mit den richtigen Eigenschaften und Werten können Sie das Aussehen von Schriftarten auf Ihrer Website steuern.
