So legen Sie die Schriftart mithilfe von CSS fest

PHPz
Freigeben: 2023-04-21 10:58:26
Original
1409 Leute haben es durchsucht

CSS ist der wichtigste Teil des Webdesigns. Es ermöglicht Webseiten, verschiedene Stile und Layouts darzustellen. Eine der grundlegendsten CSS-Eigenschaften ist die Schriftart-Eigenschaft. Durch Festlegen der Schriftart können wir Größe, Farbe, Schriftart und andere damit verbundene Attribute des Textes auf der Webseite steuern.

Im Folgenden finden Sie einige Tipps und Wissenspunkte zum Festlegen der Schriftart, die Ihnen dabei helfen können, diese häufig verwendete CSS-Eigenschaft besser zu beherrschen.

  1. Einstellung der Schriftgröße

In CSS wird das Attribut „font-size“ normalerweise zum Festlegen der Textgröße verwendet. Sein Wert kann Pixel (px), Prozentsatz (%), em, rem usw. sein. Im Allgemeinen eignen sich Pixel als absolute Längeneinheiten besser für Layouts mit fester Größe. Sie können beispielsweise die Schriftgröße des h1-Elements auf 36 Pixel festlegen:

h1 {

font-size: 36px;
Nach dem Login kopieren

}

, während Prozentsätze und Geviert usw. eher für Websites mit relativen Längeneinheiten und skalierbaren Designs geeignet sind. Sie können beispielsweise die Schriftgröße eines Absatzelements auf das 1,2-fache festlegen:

p {

font-size: 120%;
Nach dem Login kopieren

}

  1. Schriftarteinstellungen

Neben der Schriftgröße ist die Schriftart (Schriftfamilie) ein weiteres wichtiges Attribut. Durch Festlegen der Schriftfamilie können wir die Standardschriftart des Textes ändern. Normalerweise gibt es mehrere Schriftarten, die auf einer Webseite verwendet werden können. Daher können Sie beim Festlegen von Schriftartattributen mehrere Schriftarten durch Kommas trennen, um sicherzustellen, dass Besucher die Schriftarten auf der Webseite korrekt wiedergeben können. Zum Beispiel:

body {

font-family: "Microsoft YaHei", "SimHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
Nach dem Login kopieren

}

Wenn in diesem Beispiel die erste Schriftart „Microsoft YaHei“ nicht auf dem Computer des Besuchers verfügbar ist, werden nacheinander andere Schriftarten ausprobiert, bis die Webseite korrekt gerendert wird.

  1. Fett- und Kursivschrift-Einstellungen

Mit dem Attribut „font-weight“ kann die Stärke der Schriftart festgelegt werden. Sein Wert kann normal (Standard), fett (fett), fetter (fetter), heller (heller), 100-900 (je größer die Zahl, desto fetter die Schriftart) usw. sein.

Um beispielsweise die Schriftart des h2-Elements fett darzustellen:

h2 {

font-weight: bold;
Nach dem Login kopieren

}

Mit dem Attribut „font-style“ kann festgelegt werden, ob der Text kursiv angezeigt wird. Sein Wert kann normal sein (Standard). kursiv (italic), oblique (tilt) usw.

Setzen Sie beispielsweise einen Text kursiv:

p {

font-style: italic;
Nach dem Login kopieren

}

  1. Einstellung der Zeilenhöhe

Zeilenhöhe bezieht sich auf den vertikalen Abstand zwischen Textzeilen. Der Standardwert ist normal. was durch die Schriftart selbst angegeben wird. Durch Festlegen der Eigenschaft line-height können wir den Abstand zwischen Zeilen steuern und so den Gesamtlayouteffekt des Absatzes beeinflussen.

Stellen Sie beispielsweise die Zeilenhöhe des h3-Elements auf das 1,6-fache ein:

h3 {

line-height: 1.6;
Nach dem Login kopieren

}

Kurz gesagt: Durch sorgfältiges Beherrschen des Schriftartattributs können wir Größe, Farbe, Schriftart, Dicke usw. problemlos anpassen Linie der Schriftart und andere Aspekte, um einen schönen und einzigartigen Webdesign-Effekt zu erzielen.

Das obige ist der detaillierte Inhalt vonSo legen Sie die Schriftart mithilfe von CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage