CSS -Schriftgröße
Schriftgröße
Die font-sizeEigenschaft legt die Größe des Textes fest.
Die Möglichkeit, die Textgröße zu verwalten, ist im Webdesign wichtig. Sie sollten jedoch keine Schriftgrößenanpassungen verwenden, um Absätze wie Überschriften oder Überschriften wie Absätze aussehen zu lassen.
Verwenden Sie immer die richtigen HTML-Tags, wie <h1> - <h6> für Überschriften und <p> für Absätze.
Der Wert für die Schriftgröße kann eine absolute oder relative Größe sein.
Absolute Größe:
- Legt den Text auf eine angegebene Größe fest
- Erlaubt einem Benutzer nicht, die Textgröße in allen Browsern zu ändern (schlecht aus Gründen der Barrierefreiheit)
- Die absolute Größe ist nützlich, wenn die physische Größe der Ausgabe bekannt ist
Relative Größe:
- Legt die Größe relativ zu umgebenden Elementen fest
- Ermöglicht einem Benutzer, die Textgröße in Browsern zu ändern
Hinweis: Wenn Sie keine Schriftgröße angeben, beträgt die Standardgröße für normalen Text wie Absätze 16 Pixel (16 Pixel = 1 Em).
Stellen Sie die Schriftgröße mit Pixeln ein
Wenn Sie die Textgröße mit Pixeln festlegen, haben Sie die volle Kontrolle über die Textgröße:
Beispiel
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Tipp: Wenn Sie Pixel verwenden, können Sie trotzdem das Zoom-Werkzeug verwenden, um die Größe der gesamten Seite zu ändern.
Stellen Sie die Schriftgröße mit Em ein
Damit Benutzer die Textgröße (im Browsermenü) ändern können, verwenden viele Entwickler em anstelle von Pixeln.
1em entspricht der aktuellen Schriftgröße. Die Standardtextgröße in Browsern beträgt 16 Pixel. Die Standardgröße von 1em ist also 16px.
Die Größe kann mit dieser Formel von Pixel zu em berechnet werden: Pixel /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 */
}
Im obigen Beispiel ist die Textgröße in em dieselbe wie im vorherigen Beispiel in Pixel. Mit der em-Größe ist es jedoch möglich, die Textgröße in allen Browsern anzupassen.
Leider gibt es immer noch ein Problem mit älteren Versionen des Internet Explorers. Der Text wird größer, als er sollte, wenn er vergrößert wird, und kleiner, als er sollte, wenn er verkleinert wird.
Verwenden Sie eine Kombination aus Prozent und Em
Die Lösung, die in allen Browsern funktioniert, besteht darin, eine Standardschriftgröße in Prozent für das <body>-Element festzulegen:
Beispiel
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Unser Code funktioniert jetzt super! Es zeigt die gleiche Textgröße in allen Browsern und erlaubt allen Browsern, den Text zu zoomen oder die Größe zu ändern!
Responsive Schriftgröße
Die Textgröße kann mit einer vwEinheit, also der "Breite des Ansichtsfensters", eingestellt werden.
Auf diese Weise folgt die Textgröße der Größe des Browserfensters:
Hallo Welt
Ändern Sie die Größe des Browserfensters, um zu sehen, wie die Schriftgröße skaliert wird.
Beispiel
<h1 style="font-size:10vw">Hello World</h1>
Viewport ist die Größe des Browserfensters. 1vw = 1 % der Ansichtsfensterbreite. Wenn das Ansichtsfenster 50 cm breit ist, entspricht 1 vw 0,5 cm.