CSS-Seitenschriftart festlegen

CSS ist eine Sprache, mit der Webseiten gestaltet werden, um sie schöner und leichter lesbar zu machen. Darunter sind Schriftarteinstellungen einer der am häufigsten verwendeten und wichtigsten Teile von CSS, da geeignete Schriftarteinstellungen die Lesbarkeit und die visuellen Effekte der Website verbessern können. In diesem Artikel erfahren Sie, wie Sie mithilfe von CSS die Schriftart der Seite festlegen.

1. Schriftfamilie und Schriftarten

In CSS bezieht sich Schriftfamilie auf die auf der Website verwendete Schriftfamilie. Beispielsweise können wir die Schriftfamilie auf „Arial, serifenlos“ festlegen, was bedeutet, dass das CSS versucht, die standardmäßige serifenlose Schriftart des Systems zu verwenden, wenn die Arial-Schriftart nicht auf dem Computer des Benutzers installiert ist.

Schriftart (Schriftart) bezieht sich auf die spezifischen Attribute der Schriftart, einschließlich Schriftserie, Schriftgröße, Schriftstärke, Schriftstil (z. B. Kursivschrift) usw. Hier sind einige häufig verwendete CSS-Schriftarteigenschaften:

1. font-family: Schriftname oder Schriftfamilie.
2. Schriftgröße: Schriftgröße, Sie können die Einheiten px, em, rem oder den Prozentsatz der relativen Größe verwenden.
3. Schriftstärke: Die Schriftstärke, die normal (Standard), fett oder ein numerischer Wert (100-900) sein kann.
4. Schriftstil: Schriftstil, der normal (Standard), kursiv oder schräg sein kann.

2. So legen Sie die Schriftart der Seite fest

In CSS gibt es die folgenden drei Methoden, um die Schriftart festzulegen:

1. Verwenden Sie @font-face, um benutzerdefinierte Schriftarten zu importieren:

@font-face {
Schriftart -family: benutzerdefiniert -font;
src: url('path/to/font.woff2') format('woff2');
}

body {
Schriftfamilie: benutzerdefinierte Schriftart, serifenlos;
Schriftart -size: 16px ;
}

In diesem Beispiel ist „custom-font“ die von uns definierte Schriftfamilie, die auf die Schriftdatei mit dem Pfad „path/to/font.woff2“ verweist. Diese Schriftart wird dann auf das Body-Element angewendet und die Standardschriftart ist auf serifenlos eingestellt.

2. Verwenden Sie Google Fonts:

Google Fonts ist eine kostenlose Online-Schriftartenbibliothek, die Hunderte von Schriftarten zur Auswahl bietet. Um Google Fonts zu verwenden, fügen Sie den folgenden Code in den Kopfbereich Ihres HTML-Dokuments ein:

Dann wenden Sie die Schriftart auf das Element an:

body {
Schriftfamilie: 'Open Sans', sans-serif;
Schriftgröße: 16px;
}

3. Verwenden Sie die Standardschriftart des Systems:

Wenn Sie möchten, dass die Seite die Standardschriftart des Systems verwendet, können Sie den folgenden Code verwenden:

body {
Schriftfamilie: -apple-system, BlinkMacSystemFont, „Segoe UI“, Roboto, Oxygen-Sans, Ubuntu, Cantarell , „Helvetica Neue“, serifenlos ;
Schriftgröße: 16px;
}

Standardschriftarten des Systems sind in der Regel gut lesbar, daher ist es eine gute Wahl.

3. Passen Sie Schriftgröße und Zeilenhöhe an.

Schriftgröße und Zeilenhöhe sind zwei Faktoren, die die Lesbarkeit beeinflussen. In CSS können Sie den folgenden Code verwenden, um die Schriftgröße und Zeilenhöhe anzupassen:

body {
font-size: 18px;
line-height: 1.6;
}

wobei sich line-height auf die Zeilenhöhe und bezieht Schriftgröße Im Allgemeinen ist ein Verhältnis von 1,4 bis 1,6 eine gute Wahl, um das Seitenlayout schön und leicht lesbar zu gestalten.

4. Schriftstärke und -stil

Schriftstärke und -stil können sich auch auf die Lesbarkeit und den visuellen Effekt der Schriftart auswirken. In CSS können Sie den folgenden Code verwenden, um die Stärke, den Stil oder beides der Schriftart zu ändern:

body {
Font-weight: Bold;
}

p {
Font-Style: Italic;
}

h1 {
Schriftstärke: fett;
Schriftstil: kursiv;
}

5. Durch geeignete Schriftarteinstellungen können die Lesbarkeit, die visuellen Effekte und das Benutzererlebnis der Website verbessert werden. In der Anwendung können Sie je nach Thema und Zielgruppe der Website die entsprechende Schriftfamilie, Schriftgröße, -stärke, -stil und -zeilenhöhe auswählen, wodurch die Website schöner und leichter lesbar wird und den Benutzern ein besseres Erlebnis geboten wird Leseerlebnis.

Das obige ist der detaillierte Inhalt vonCSS-Seitenschriftart festlegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!