ROG Innovation Logo

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

Font-Weight - Schriftstärke definieren

markierung

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

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
Feedback
feedback
Anzeige
Spenden
ROG Innovation unterstützen