CSS-Eigenschaft: font-weight, Kategorien: Schrift (allgemein), Fonts (CSS 2.1)
Schriftstärke
Steuert, ob Text dick, dünn oder normal dargestellt wird.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Schriftstärke |
| normal |
Verwandte Eigenschaften aus der Kategorie: Schrift (allgemein), Fonts (CSS 2.1):
- additive-symbols
- fallback
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- Aktuelle Seite: font-weight
- negative
- prefix
- range
- src
- suffix
- symbols
- system
- unicode-range
Folgendes ist beim Einsatz von font-weight zu beachten:
- Die Einstellmöglichkeiten sind vielfältig, die tatsächlichen Möglichkeiten hängen allerdings vom hinterlegen Schriftsatz ab. In der Regel sind Schriftsätze sind in normal, fett, italic und fett italic verfügbar.
- 400 entspricht normal, 700 bold. Man findet auch gerne die Angabe, dass 600 einer Darstelung in bold enstpricht, was bein PCs auch für eine fette Darstellung sorgt. Da das MAC-OS sich in der Darstellung von Abständen, Breiten und Stärke sich leicht von der des PC unterscheidet, reicht für den Apple-Benutzer 600 als bold-Angabe nicht aus, deswegen ist - um eine betriebssystemübergreifende Darstellung zu erzielen - die Angabe von 700 für bold notwendig.
- Wie unten an den Beispielen zu sehen ist, werden extreme Varianten in den nächst vergleichbaren Schriftstärken umgesetzt, wenn die Schriftsatz in der Sträke nicht verfügbar ist.
- Obwohl die Schriftstärke "an sich" ziemlich trivial ist, hat die theoretische Grundlage der Schriftschnitte eine hohe Komplexität und der Umgang mit den Bezeichnungen wie "Book", "Medium" oder "Heavy" ist in der Praxis gerne Grund für viel Verwirrung. Weitere Details zu der Schriftstärke im Web sind unter http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight zu finden.
- Generelle Information über Schriftschnitte findet man unter http://de.wikipedia.org/wiki/Schriftschnitt. Dort sind alle 9 Varianten der Schriftstärke beschrieben.
- Schriftstärke und Internet: Der Umfang von Schriften und deren Eigenschaften ist wahrscheinlich eher der Geschichte der Druckkunst geschuldet und ist eher für Printdesign relevant. Auf Computern sind Schriften selten in 9 Varianten hinterlegt, sodass es sich bei den Abstufungen der font-weight um die blanke Theorie, bzw. um die Detailverliebtheit von Schriftliebhabern dreht. Für das alltägliche Web spielen sämtliche Abstufungen keine Rolle, als Nicht-Fachmann werden sie kaum einen Unterschied zwischen einer 200 oder 300er Schriftstärke feststellen. Abgesehen davon, dass die meisten Schriften eben nicht in dem Umfang hinterlegt sind, dass diese Steuerung Sinn machen würde. Relevant sind also normal bzw. 400 und bold bzw. 700.
- Oder zynisch ausgedrückt: Ob mir Google die Info, nach der ich suche, in einer 300 oder 400er Stärke ausliefert, ist mir schnuppe. Beim Einsatz einer solchen Eigenschaft sollte man immer die Zielsetzung des Webangebots berücksichtigen, und dass man sich nicht in Details verzettelt. An dieser Stelle seien zwei etablierte Prinzipien erwähnt: KISS (Keep it simple and stupid, http://de.wikipedia.org/wiki/KISS-Prinzip) und Form follows function (Form folgt Funktion oder FFF, http://de.wikipedia.org/wiki/Form_follows_function). Schließlich ein schönes Beispiel dafür, dass die Realität im Web weit weg vom Standard ist. Das ist nicht schlimm, sollte aber bei der Webentwicklung anerkannt werden.
- Kursive Schrift ist über die Eigenschaft font-style zu steuern.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu font-weight:
- W3C Spezifikation:
http://www.w3.org/TR/css3-fonts/#descdef-font-weight
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
font-variant-position - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
grid
Beispiele
HTML:
<h1>Überschrift default</h1>CSS:
/* Standard Darstellung */Beispiel Nr. 1 So sieht's aus:
Überschrift default
HTML:
<h1 class="thin">Überschrift light</h1>
<h1 class="light">Überschrift light</h1>CSS:
h1.thin {
font-weight: 100;
}
h1.light {
font-weight: 400;
}Beispiel Nr. 2 So sieht's aus:
Überschrift light
Überschrift light
HTML:
<h1 class="normal">Überschrift normal</h1>CSS:
h1.normal {
font-weight: 700;
}Beispiel Nr. 3 So sieht's aus:
Überschrift normal
HTML:
<h1 class="big">Überschrift normal</h1>CSS:
h1.big {
font-weight: 900;
}Beispiel Nr. 4 So sieht's aus:
Überschrift normal
HTML:
<p>Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, <strong>ein blinder Text</strong> zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.</p>CSS:
p {
font-weight: bold;
}
p strong {
font-weight: lighter;
}Beispiel Nr. 5 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen.
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!