Web.Reporter.pl Pełny kurs HTML 4.01, XHTML 1.0 i CSS 2 z przykładami
autor: Dariusz Majgier • ostatnia modyfikacja: 2002.06.10 • wersja kursu: 1.1

[0-9]  A  B  C  D  E  F  G  H  I  J  K  L  M  N  O  P  Q  R  S  T  U  V  W  X  Y  Z 
[główne menu] - [elementy HTML] - [atrybuty HTML] - [style CSS] - [artykuły]
tabele • listy • formularze • multimedia • el. strukturalne • el. blokowe • el. liniowe

font-weight

Styl definiuje grubość (wagę) czcionki.

Wartości:

• normal (wartość domyślna) - CSS1 / IE3, N4, O3.5
standardowa grubość
• bold - CSS1 / IE3, N4, O3.5
gruba
• bolder - CSS1 / IE4, N4, O3.5
grubsza
• lighter - CSS1 / IE4, N4, O3.5
cieńsza
• 100|200|300|400|500|600|700|800|900 - CSS1 / IE4, N4, O3.5
grubości numeryczne, 400 to normal, 700 to bold.
• inherit - CSS2 / N6
przejęcie wartości "rodzica", np. font-weight:inherit;
Pozostałe cechy:
• CSS/przeglądarki: CSS1 / IE3, N4, O3.5
• odpowiednik HTML: B
Przykładowe zastosowania:

• Przykład 1:

Przykładowy tekst, w którym pokazane są różne grubości czcionek:
<BR>- <SPAN style="font-weight:bold;"> próbka bold</SPAN>
<BR>- <SPAN style="font-weight:bolder;"> próbka bolder</SPAN>
<BR>- <SPAN style="font-weight:lighter;"> próbka lighter</SPAN>
<BR>- <SPAN style="font-weight:100;"> próbka 100</SPAN>
<BR>- <SPAN style="font-weight:200;"> próbka 200</SPAN>
<BR>- <SPAN style="font-weight:300;"> próbka 300</SPAN>
<BR>- <SPAN style="font-weight:400;"> próbka 400</SPAN>
<BR>- <SPAN style="font-weight:500;"> próbka 500</SPAN>
<BR>- <SPAN style="font-weight:600;"> próbka 600</SPAN>
<BR>- <SPAN style="font-weight:700;"> próbka 700</SPAN>
<BR>- <SPAN style="font-weight:800;"> próbka 800</SPAN>
<BR>- <SPAN style="font-weight:900;"> próbka 900</SPAN>

Przykładowy tekst, w którym pokazane są różne grubości czcionek:
- próbka bold
- próbka bolder
- próbka lighter
- próbka 100
- próbka 200
- próbka 300
- próbka 400
- próbka 500
- próbka 600
- próbka 700
- próbka 800
- próbka 900

• Przykład 2:

<STYLE TYPE="text/css"><!--
B {font-weight:bold;}
.l {font-weight:lighter;}
--></STYLE>

• • •
Masz jakieś pytania? Podyskutuj na forum dyskusyjnym o HTML i CSS!