ROG Innovation Logo

Tutorials, Gadgets und vieles mehr - Idea. Creation. Success. - Let's create the future!

Font-Weight - Schriftstärke definieren

Tutorial CSS und HTML Schriftdicke verändern

Mit CSS lässt sich bei jeder Schrift die Dicke (Stärke) der Schrift definieren. So kann die Schrift dicker oder eben dünner gestaltet werden und optisch ansprechender wirken.

Dabei kann zwischen den vier Grunddefinitionen oder einem Nummerischen Wert ausgewählt werden.

Grunddefinitionen:
  • normal
  • bold (fett/dick)
  • bolder (fetter/dicker)
  • lighter (schmaler/dünner)
CSS Definitions Beispiel einer fetten Schrift
span { font-weight: bold; }

mögliche Zahlenwerte:
  • 100
  • 200
  • 300
  • 400 (normal)
  • 500
  • 600
  • 700 (bold)
  • 800
  • 900
CSS font-weight 700
.w700 { font-family: Open Sans; font-weight: 700; font-size: 1em; }

Vorsicht
Es können je nach Schriftart nicht alle Zahlenwerte verwendet werden!


Beispiel

CSS
.font {
font-family: Calibri;}
.w100 { font-weight: 100;}
.w200 { font-weight: 200;}
.w300 { font-weight: 300;}
.w400 { font-weight: 400;}
.w500 { font-weight: 500;}
.w600 { font-weight: 600;}
.w700 { font-weight: 700;}
.w800 { font-weight: 800;}
.w900 { font-weight: 900;}

HTML
<div class="font">
<div class="w900">Calibri mit font-weight 900 (nicht verf�gbar)</div>
<div class="w800">Calibri mit font-weight 800 (nicht verf�gbar)</div>
<div class="w700">Calibri mit font-weight 700 (bold)</div>
<div class="w600">Calibri mit font-weight 600 (nicht verf�gbar)</div>
<div class="w500">Calibri mit font-weight 500 (nicht verf�gbar)</div>
<div class="w400">Calibri mit font-weight 400 (normal)</div>
<div class="w300">Calibri mit font-weight 300</div>
<div class="w200">Calibri mit font-weight 200 (nicht verf�gbar)</div>
<div class="w100">Calibri mit font-weight 100 (nicht verf�gbar)</div>
</div>

Calibri mit font-weight 900 (nicht verfügbar)
Calibri mit font-weight 800 (nicht verfügbar)
Calibri mit font-weight 700 (bold)
Calibri mit font-weight 600 (nicht verfügbar)
Calibri mit font-weight 500 (nicht verfügbar)
Calibri mit font-weight 400 (normal)
Calibri mit font-weight 300
Calibri mit font-weight 200 (nicht verfügbar)
Calibri mit font-weight 100 (nicht verfügbar)



Kommentare
Hier können sowohl Fragen wie auch ein Feedback zum oben stehenden Artikel eingetragen werden.


*Name:


*Kommentar:

(max. 500 Zeichen)

Terms:


*Pflichtfeld

Hinweis:
Der Eintrag wird nach einer redaktionellen Prüfung in den kommenden Tagen freigeschalten.

Top Themen

Suche
DoubleTwist
doubletwist iTunes mit Android Handy synchronisieren
Free YouTube Video Music
Youtube gratis Musik für Youtube Videos
Anzeige
Spenden
ROG Innovation unterstützen