CSS-Schriftgröße-Eigenschaft
Die Eigenschaft font-size definiert die Schriftgröße des Textes.
Die Schriftgröße kann auf folgende Arten festgelegt werden:
- absolute-size
- relative-size
- length
- percentage
Die absoluten Schriftgrößen umfassen die folgenden Werte:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
Die relativen Schriftgrößen umfassen die folgenden Werte:
- smaller
- larger
Längen können relative Längen (em, ex, px) und absolute Längen (in, cm, mm, pt, pc) sein. Prozentangaben geben eine absolute Schriftgröße an, die sich auf die Schriftgröße des Elternelements bezieht.
| Initial Value | medium |
|---|---|
| Applies to | Alle Elemente. Sie gilt auch für ::first-letter und ::first-line. |
| Inherited | Ja. |
| Animatable | Ja. |
| Version | CSS1 |
| DOM Syntax | object.style.fontSize = "15px"; |
Syntax
Syntax der CSS-Eigenschaft font-size
font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit;Beispiel für die Eigenschaft font-size:
Beispiel der CSS-Eigenschaft font-size mit den Werten px, em, pt, x-small und %(Prozent)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
font-size: 24pt;
}
h3 {
font-size: 26px;
}
p {
font-size: 1em;
}
a {
font-size: 100%;
}
span {
font-size: x-small;
}
</style>
</head>
<body>
<span>This span is written with x-small value.</span>
<p>This paragraph is written with 1em font-size.</p>
<a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
<h3>We used x-small font size for this heading.</h3>
<h1>We set the font size 24pt for this heading.</h1>
</body>
</html>Ergebnis
Verwendung von Prozentwerten
Prozentwerte beziehen sich auf die Schriftgröße des Elternelements. Der folgende Code zeigt die Verwendung:
Beispiel für die in Prozent angegebene Eigenschaft font-size:
Beispiel für die in Prozent angegebene Eigenschaft font-size:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3 {
font-size: 125%;
}
</style>
</head>
<body>
<h3>We used x-small font size for this heading.</h3>
<span>This span is written with x-small value.</span>
<p>This paragraph is written with 1em font-size.</p>
</body>
</html>Verwendung der Einheit em
Die Einheit em gilt als relative Einheit. Sie basiert auf dem berechneten Wert der Schriftgröße des Elternelements. Im folgenden Code ist der Absatz 32px groß, weil 2x16=32 ist, und die Überschrift hat eine Schriftgröße von 48px, weil 3x16=48px ist. Diese Methode ist sehr nützlich, weil wir sicher sein können, dass alle Kindelemente immer zueinander in Beziehung stehen.
Beispiel für die Eigenschaft font-size mit dem Wert "em":
Beispiel für die Eigenschaft font-size mit dem Wert "em":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.container {
font-size: 16px;
}
p {
font-size: 2em;
}
h2 {
font-size: 3em;
}
</style>
</head>
<body>
<div class="container">
<h2>Here is the heading</h2>
<p>Here is the text.</p>
</div>
</body>
</html>Verwendung der Einheit rem
Bei der Verwendung der Einheit rem hängt die Schriftgröße vom Wert des HTML-Elements ab. Im folgenden Beispiel wird die Einheit rem vom HTML-Element geerbt, deshalb ist sie gleich 24px. Die Überschrift hat also eine Schriftgröße von 24px, weil 1.5x16=24px ist.
Beispiel für die Eigenschaft font-size mit dem Wert "rem":
Beispiel für die Eigenschaft font-size mit dem Wert "rem":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
font-size: 16px;
}
h2 {
font-size: 1.5rem;
}
</style>
</head>
<body>
<div class="container">
<h2>Here is the heading</h2>
<p>Here is the text.</p>
</div>
</body>
</html>Verwendung der Einheit ex
Bei der Einheit ex entspricht 1ex der berechneten Höhe des Buchstabens 'x' in der Schrift des aktuellen Elements. Im folgenden Codebeispiel beträgt das HTML-Element 15px. Die x-Höhe dieser bestimmten Schrift bestimmt alle anderen Schriftgrößen.
CSS font-size Property
.exunit {
font-size: 15ex;
}Verwendung von Viewport-Einheiten
Viewport-Einheiten (vw und vh) werden verwendet, um die Schriftgröße eines Elements festzulegen, die sich an der Größe des Viewports orientiert.
- 1vw = 1% der Viewport-Breite
- 1vh = 1% der Viewport-Höhe
CSS font-size Property
.viewport {
font-size: 120vh;
}Beispiel für die Eigenschaft font-size mit dem Wert "length":
Beispiel für die Eigenschaft font-size mit dem Wert "length"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
color: green;
font-size: 2vh;
}
p {
color: red;
font-size: 1em;
}
.length {
color: orange;
font-size: 30px;
}
h3 {
color: lightblue;
font-size: 3ex;
}
h1 {
color: purple;
font-size: 24pt;
}
a {
color: blue;
font-size: 120%;
}
</style>
</head>
<body>
<h2>Font-size property</h2>
<span>This text is written with 2vh font-size.</span>
<p>This paragraph is written with 1em font-size.</p>
<div class="length">Example with 30px font-size length </div>
<h3>Example with 3ex font-size length.</h3>
<h1>We set the font size 24pt for this heading.</h1>
<a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
</body>
</html>Beispiel für die Eigenschaft font-size mit den absoluten Größenwerten:
Beispiel für die Eigenschaft font-size (absolute-size):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font-xxsmall {
color: grey;
font-size: xx-small;
}
.font-xsmall {
color: grey;
font-size: x-small;
}
.font-small {
color: grey;
font-size: small;
}
.font-medium {
color: grey;
font-size: medium;
}
.font-large {
color: grey;
font-size: large;
}
.font-xlarge {
color: grey;
font-size: x-large;
}
.font-xxlarge {
color: grey;
font-size: xx-large;
}
</style>
</head>
<body>
<h1>Font-size property</h1>
<div class="font-xxsmall">Example with font-size xx-small property</div>
<div class="font-xsmall">Example with font-size x-small property</div>
<div class="font-small">Example with font-size small property</div>
<div class="font-medium">Example with font-size medium property</div>
<div class="font-large">Example with font-size large property</div>
<div class="font-xlarge">Example with font-size x-large property</div>
<div class="font-xxlarge">Example with font-size xx-large property</div>
</body>
</html>Beispiel für die Eigenschaft font-size mit den Werten "smaller" und "larger":
Beispiel für die Eigenschaft font-size mit den Werten "smaller" und "larger":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smaller {
color: red;
font-size: smaller;
}
.larger {
color: red;
font-size: larger;
}
</style>
</head>
<body>
<h1>font-size property</h1>
<div class="smaller">Example with font-size smaller property</div>
<div class="larger">Example with font-size larger property</div>
</body>
</html>Werte
| Value | Description | Play it |
|---|---|---|
| medium | Legt die Schriftgröße auf medium fest. Dies ist der Standardwert dieser Eigenschaft. | Play it » |
| xx-small | Legt die Schriftgröße auf xx-small fest. | Play it » |
| x-small | Legt die Schriftgröße auf x-small fest. | Play it » |
| small | Legt die Schriftgröße auf small fest. | Play it » |
| large | Legt die Schriftgröße auf large fest. | Play it » |
| x-large | Legt die Schriftgröße auf x-large fest. | Play it » |
| xx-large | Legt die Schriftgröße auf xx-large fest. | Play it » |
| smaller | Macht die Schriftgröße kleiner. | Play it » |
| larger | Macht die Schriftgröße größer. | Play it » |
| length | Gibt die Schriftgröße über px, em usw. an. | Play it » |
| % | Legt die Schriftgröße als Prozentsatz der Schriftgröße des Elternelements fest. | Play it » |
| initial | Verwendet für die Eigenschaft ihren Standardwert. | Play it » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Practice
Which units can be used to set the 'font-size' property in CSS?