CSS-Schriftgröße

Zeichengröße

font-size Eigenschaft zur Festlegung der Textgröße

In der Webgestaltung ist es wichtig, die Textgröße zu verwalten. Es sollte jedoch nicht die Anpassung der Zeichengröße verwendet werden, um Absätze so aussehen zu lassen, als wären sie Überschriften, oder um Überschriften so aussehen zu lassen, als wären sie Absätze.

Verwenden Sie immer die richtigen HTML-Tags, z.B. <h1> - <h6> für Überschriften und <p> nur für Absätze.

Der font-size-Wert kann eine absolute oder relative Größe sein.

Absolute Größen:

  • Text auf angegebene Größe setzen
  • Ermöglichen, dass Benutzer die Textgröße in allen Browsern ändern können (schlechte Zugänglichkeit)
  • Absolute Größen sind nützlich, wenn die physische Ausgabegröße bekannt ist

Relative Größen:

  • Größe im Verhältnis zu umgebenden Elementen einstellen
  • Ermöglichen, dass Benutzer die Textgröße im Browser ändern können

Anmerkung:Wenn Sie die Textgröße nicht angeben, beträgt die Standardgröße für regulären Text (z.B. Absätze) 16px (16px = 1em).

Textgröße mit Pixeln einstellen

Die Verwendung von Pixeln zur Festlegung der Textgröße ermöglicht eine vollständige Kontrolle über die Textgröße:

Beispiel

h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
p {
  font-size: 14px;
}

Versuchen Sie es selbst

Tipp:Wenn Sie Pixel verwendet haben, können Sie dennoch das Zoom-Tool verwenden, um die Größe der gesamten Seite anzupassen.

Textgröße mit Em einstellen

Um den Benutzern die Anpassung der Textgröße zu ermöglichen (im Browsermenü), verwenden viele Entwickler Em anstatt Pixel.

W3C empfiehlt die Verwendung von Em-Einheiten.

1em entspricht der aktuellen Zeichengröße. Die Standardtextgröße in Browsern beträgt 16px. Daher beträgt die Standardgröße 1em 16px.

Diese Formel kann verwendet werden, um von Pixeln zu Em zu rechnen: pixels/16=em.

Beispiel

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}
p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

Versuchen Sie es selbst

Im obigen Beispiel entspricht die Textgröße in Em-Einheiten der Pixelgröße des vorherigen Beispiels. Wenn jedoch Em-Größen verwendet werden, kann die Textgröße in allen Browsern angepasst werden.

Leider gibt es immer noch Probleme in alten Versionen von Internet Explorer. Beim Vergrößern des Textes ist er größer als er sein sollte, und beim Verkleinern ist er kleiner.

Kombination von Prozentsatz und Em verwenden

Beispiel

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

Versuchen Sie es selbst

Unser Code läuft derzeit gut! Er zeigt die gleiche Textgröße in allen Browsern an und ermöglicht es allen Browsern, die Textgröße zu skalieren oder anzupassen!

Responsives Zeichensatzgröße

Man kann vw Einheiten zur Festlegung der Textgröße, was "Viewport-Breite" ("viewport width") bedeutet.

Dadurch wird die Textgröße der Größe des Browserfensters folgen. Passen Sie die Größe des Browserfensters an, um zu sehen, wie die Schriftgröße skaliert wird:

Beispiel

<h1 style="font-size:10vw">Hallo Welt</h1>

Versuchen Sie es selbst

Der Viewport (Viewport) ist die Größe des Browserfensters. 1vw = 1% der Viewport-Breite. Wenn der Viewport 50 cm breit ist, beträgt 1vw 0,5 cm.