Analyse der CSS-Schriftfamilieneigenschaften: Schriftfamilie und Schriftgröße

CSS-Schriftfamilienattributanalyse: Schriftfamilie und Schriftgröße

Im Webdesign sind die Auswahl und Größe der Schriftarten sehr wichtig, sie wirken sich direkt auf die Lesbarkeit und den Gesamtstil der Webseite aus. CSS bietet eine Fülle von Schriftarteigenschaften, zu den am häufigsten verwendeten gehören „font-family“ und „font-size“.

1. font-family-Attribut

font-family wird verwendet, um den Namen der Schriftart oder die Prioritätsreihenfolge der Schriftartfamilie anzugeben. Beispielsweise können wir die Schriftart wie folgt festlegen:

p {
  font-family: Arial, Helvetica, sans-serif;
}

In diesem Beispiel wird zuerst die Schriftart Arial ausprobiert. Wenn die Schriftart Arial nicht verfügbar ist, wird schließlich die Schriftart Helvetica ausprobiert , wird die Standard-Serif-Schriftart verwendet. Diese Art der Einrichtung einer Schriftfamilie ist sehr nützlich, da möglicherweise nicht dieselben Schriftarten auf verschiedenen Geräten verfügbar sind.

In CSS kann „font-family“ auch eine Liste mit mehreren Schriftartnamen angeben, wie folgt:

h1 {
  font-family: "Times New Roman", Times, serif;
}

Wenn in diesem Beispiel die Schriftart „Times New Roman“ auf dem Gerät des Benutzers nicht verfügbar ist, wird die Schriftart „Times“ ausprobiert und Wenn auch die Schriftart „Times“ nicht verfügbar ist, wird die Standard-Serifenschrift verwendet.

Außerdem gibt es einige universelle Schriftfamilien, die auf verschiedenen Betriebssystemen und Browsern verwendet werden können, wie z. B. Sans-Serif, Serif, Monospace, Cursive und Fantasy.

2. font-size-Attribut

font-size wird verwendet, um die Größe der Schriftart anzugeben. Zu den gängigen Einheiten gehören Pixel (px), Prozentsätze (%) und em.

h2 {
  font-size: 24px;
}

In diesem Beispiel ist die Schriftgröße des h2-Elements auf 24 Pixel eingestellt.

Außerdem können wir auch Prozenteinheiten verwenden, um die Schriftgröße anzugeben, zum Beispiel:

h3 {
  font-size: 120%;
}

In diesem Beispiel beträgt die Schriftgröße des h3-Elements 120 % der Schriftgröße des übergeordneten Elements.

Schließlich können Sie die Schriftgröße auch mithilfe von Em-Einheiten angeben, die relativ zur Schriftgröße des Elements selbst berechnet werden. Zum Beispiel:

p {
  font-size: 1.2em;
}

In diesem Beispiel beträgt die Schriftgröße des p-Elements das 1,2-fache der Schriftgröße des übergeordneten Elements.

Zusammenfassung

Beim Webdesign ist es sehr wichtig, die richtige Schriftart und -größe richtig zu wählen. Die Prioritätsreihenfolge der Schriftarten kann über das Attribut „font-family“ festgelegt werden, um gute Anzeigeeffekte auf verschiedenen Geräten sicherzustellen. Mit der Eigenschaft „font-size“ wird die Größe der Schriftart angepasst, die in Pixeln, Prozentsätzen und Em-Einheiten angegeben werden kann. Durch die richtige Verwendung dieser beiden Attribute können Sie die Schriftarten auf der Webseite schöner und leichter lesbar machen.

Das obige ist der detaillierte Inhalt vonAnalyse der CSS-Schriftfamilieneigenschaften: Schriftfamilie und Schriftgröße. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!