Texte in Fettschrift hervorheben
Auf Websites müssen bestimmte Bereiche von Texten häufig anders gestaltet werden, um sie vom übrigen Text hervorzuheben. Zu den beliebtesten und somit am häufigsten verwendeten Hervorhebungen zählt die Fettschrift.
Um Texte in Fettschrift zu gestalten, wird in CSS die Eigenschaft font-weight verwendet. Auf der folgenden Abbildung ist ein Beispiel, aus dem die Syntax ersichtlich ist.
Werte für font-weight
Für die Eigenschaft font-weight kann man viele Werte angaben, die nachfolgend aufgelistet sind.
Keyword-Werte
- normal (Standard, für normale Schriftstärke)
- bold (Fett)
- lighter (Dünner als die Schrift des Elternelements)
- bolder (Stärker als die Schrift des Elternelements)
- initial (Setzt auf den Standardwert)
- inherit (Vererbt vom Elternelement)
Numerische Angaben
- 100 (Schriftstärke kleiner als bei der normalen Schrift)
- 200
- 300
- 400 (wie normale Schriftstärke)
- 500
- 600
- 700 (wie Fettschrift
- 800 (Stärker als Fettschrift)
- 900
Mit den numerischen Werten kann man die Schriftstärke detaillierter festlegen als nur mit bold. Allerdings kann es sein, dass die Browser nicht alle Werte unterstützen. Bei einem Wert zwischen 600 und 900 wird die nächst dickere Schrift verwendet, wenn es vom Browser nicht unterstützt wird und bei einem Wert zwischen 100 und 500 die nächst dünnere. Nachfolgend ist ein Beispielcode mit verschiedenen Werten sowie die Abbildung von der Browserdarstellung.
.selektor1 {
font-weight: bold;
}
.selektor2 {
font-weight: lighter;
}
.selektor3 {
font-weight: bolder;
}
.selektor4 {
font-weight: 100;
}
.selektor5 {
font-weight: 200;
}
.selektor6 {
font-weight: 300;
}
.selektor7 {
font-weight: 400;
}
.selektor8 {
font-weight: 500;
}
.selektor9 {
font-weight: 600;
}
.selektor10 {
font-weight: 700;
}
.selektor11 {
font-weight: 800;
}
.selektor12 {
font-weight: 900;
}
.selektor13 {
font-weight: 1000;
}
p {
margin: 2px;
padding: 5px;
width: 300px;
height: 50px;
line-height: 50px;
font-size: 18px;
border: 1px solid #001055;
float: left;
}
<p>Text in Normalschrift</p>
<p class="selektor1">Text mit font-weight: bold</p>
<p class="selektor2">Text mit font-weight: lighter</p>
<p class="selektor3">Text mit font-weight: bolder</p>
<p class="selektor4">Text mit font-weight: 100</p>
<p class="selektor5">Text mit font-weight: 200</p>
<p class="selektor6">Text mit font-weight: 300</p>
<p class="selektor7">Text mit font-weight: 400</p>
<p class="selektor8">Text mit font-weight: 500</p>
<p class="selektor9">Text mit font-weight: 600</p>
<p class="selektor10">Text mit font-weight: 700</p>
<p class="selektor11">Text mit font-weight: 800</p>
<p class="selektor12">Text mit font-weight: 900</p>
Auch wenn viele Werte möglich sind, wird in der Praxis meistens bold verwendet.