font-weight
Podsumowanie
Własność font-weight
określa wagę lub grubość czcionki.
Wartość początkowa | normal |
---|---|
Stosowana do | wszystkich elementów. It also applies to ::first-letter and ::first-line (en-US). |
Dziedziczona | tak |
Wartość wyliczona | the keyword or the numerical value as specified, with bolder and lighter transformed to the real value |
Animation type | a font weight |
Składnia
font-weight:
normal
| bold
| bolder
| lighter
| 100
| 200
| 300
| 400
| 500
| 600
| 700
| 800
| 900
| inherit
(en-US)
Wartości
- normal
- Normalna waga czcionki. Identycznie jak 400.
- bold
- Pogrubiona czcionka. Identycznie jak 700.
- lighter
- Waga czcionki lżejsza o jedną wartość niż w elemencie rodzica (spośród dostępnych wag czcionki)
- bolder
- Waga czcionki cięższa o jedną wartość niż w elemencie rodzica (spośród dostępnych wag czcionki)
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- Liczbowe wartość wag czcionek dla czcionek, które mają więcej niż tylko waga normalna i pogrubiona. Jeśli wybrana waga jest niedostępna, wtedy dla wartości 600-900 używana jest najbliższa dostępna większa wagi (lub jeśli takiej nie ma, najbliższa dostępna lżejsza waga), a dla wartości 100-500 używana jest najbliższa dostępna mniejsza waga (lub jeśli takiej nie ma, najbliższa dostępna większa waga). Oznacza to, że dla czcionek, które mają tylko wagi normalną i pogrubioną, wartości 100-500 stają się wagą normalną, a 600-900 pogrubioną.
Przykłady
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
Specyfikacje
Zgodność z przeglądarką
Przeglądarka | Najniższa wersja |
---|---|
Internet Explorer | 3 |
Netscape | 4 |
Opera | 3.5 |