Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

font-weight

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Übersicht

Die CSS Eigenschaft font-weight definiert die Dicke der Schrift. Einige Schriftarten sind jedoch nicht in allen Werten verfügbar und unterstützen bspw. nur die Werte normal und bold.

Initialwertnormal
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Medienvisuell
Berechneter Wertdas Schlüsselwort oder der numerische Wert wie angegeben, wobei bolder und lighter in einen realen Wert umgewandelt werden
Animierbarja, als Schriftgewichtung
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

Formal syntax: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-weight: normal
font-weight: bold

font-weight: lighter
font-weight: bolder

font-weight: 100
font-weight: 200
font-weight: 300
font-weight: 400
font-weight: 500
font-weight: 600
font-weight: 700
font-weight: 800
font-weight: 900

font-weight: inherit

Werte

normal
Normale Dicke, entspricht 400.
bold
Dicke Schrift, entspricht 700.
lighter
Eine Stufe dünner als das Elternelement (basierend auf den unterstützten Werten).
bolder
Eine Stufe dicker als das Elternelement (basierend auf den unterstützten Werten).
100, 200, 300, 400, 500, 600, 700, 800, 900
Numerale Werte erlauben eine genauere Definition, als nur normal und bold. Falls ein Wert zwischen 600 und 900 von der Schriftart nicht unterstützt wird, wird stattdessen der nächst dickere Wert und bei einem Wert zwischen 100 und 500 der nächst dünnere Wert verwendet. Bei Schriftarten, welche keine Numerale Werte unterstützten entsprechen also die Werte 100-500 normal und 600-900 bold.

Beispiele

HTML

<p>
  Alice was beginning to get very tired of sitting by her sister on the
  bank, and of having nothing to do: once or twice she had peeped into the
  book her sister was reading, but it had no pictures or conversations in
  it, 'and what is the use of a book,' thought Alice 'without pictures or
  conversations?'
</p>

<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>

CSS

/* Set paragraph text to be bold. */
p {
  font-weight: bold;
}

/* Set div text to two steps darker than
   normal but less than a standard bold. */
div {
 font-weight: 600;
}

/* Sets text enclosed within span tag 
   to be one step lighter than the parent. */
span {
  font-weight: lighter;
}

Result

Spezifikation

Spezifikation Status Anmerkung
CSS Fonts Module Level 3
Die Definition von 'font-weight' in dieser Spezifikation.
Anwärter Empfehlung Keine Änderung
CSS Transitions
Die Definition von 'font-weight' in dieser Spezifikation.
Arbeitsentwurf font-weight ist annimierbar
CSS Level 2 (Revision 1)
Die Definition von 'font-weight' in dieser Spezifikation.
Empfehlung Keine Änderung
CSS Level 1
Die Definition von 'font-weight' in dieser Spezifikation.
Empfehlung  

Browser Kompatibilität

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 1.0 (1.7 oder früher) 3.0 3.5 1.3
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.0) 6.0 6.0 3.1

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: SphinxKnight, fscholz, Sebastianz, dio, SJW
 Zuletzt aktualisiert von: SphinxKnight,