Die Eigenschaft font-size legt die Größe des Textes fest.
Beim Webdesign ist es wichtig, die Textgröße verwalten zu können. Aber du sollten keine Anpassungen der Schriftgröße verwenden, um Absätze wie Überschriften aussehen zu lassen, oder Überschriften sehen aus wie Absätze.
Verwenden Sie immer die richtigen HTML-Tags, z. B. <h1> - <h6> für Überschriften und <p> für Absätze.
Der Wert für die Schriftgröße kann sein eine absolute oder relative Größe.
Absolute Größe:
Legt den Text auf eine angegebene Größe fest
Ermöglicht einem Benutzer nicht, die Textgröße in allen Browsern zu ändern (aus Gründen der Barrierefreiheit schlecht)
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, z. B. Absätze, 16 Pixel (16 Pixel=1em).
Wenn Sie die Textgröße in Pixel festlegen, haben Sie die volle Kontrolle über die Textgröße:
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Tipp: Wenn Sie Pixel verwenden, können Sie trotzdem das Zoom-Tool verwenden, um die Größe der gesamten Seite zu ändern.
Damit Benutzer die Textgröße ändern können (im Browsermenü), viele Entwickler verwenden EM anstelle von Pixeln.
1em entspricht der aktuellen Schriftgröße. Die Standardtextgröße in Browsern ist 16px. Die Standardgröße von 1em beträgt also 16 Pixel.
Die Größe kann von Pixeln zu em mit dieser Formel berechnet werden: <i>Pixel/16=<i>em
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 */
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
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 */
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>
</body>
</html>
Im obigen Beispiel ist die Textgröße in Geviert dieselbe wie im vorherigen Beispiel in Pixel. Mit der Geviertgröße ist es jedoch möglich, die Textgröße anzupassen in allen Browsern.
Leider gibt es bei älteren Versionen immer noch ein Problem des Internet Explorers. Der Text wird größer als er sollte wenn es größer gemacht wird, und kleiner als es sollte, wenn es kleiner gemacht wird.
Die Lösung, die in allen Browsern funktioniert, besteht darin, eine Standardschriftgröße festzulegen Prozent für das <body>-Element:
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>
</body>
</html>
Unser Code funktioniert jetzt großartig! Es zeigt die gleiche Textgröße in alle Browser und ermöglicht allen Browsern das Zoomen oder Ändern der Textgröße!
Die Textgröße kann mit einer vw-Einheit eingestellt werden, was der „Breite des Ansichtsfensters“ entspricht.
Auf diese Weise folgt die Textgröße der Größe des Browserfensters:
Resize the browser window to see how the font size scales.
<h1 style="font-size:10vw">Hello World</h1>Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>
<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>
</body>
</html>
Viewport ist die Größe des Browserfensters. 1vw=1 % der Breite des Ansichtsfensters. Wenn das Ansichtsfenster 50 cm breit ist, beträgt 1 vw 0,5 cm.