Wartość normal jest domyślną wartością właściwości font-weight.
Domyślnie czcionka tekstu elementu HTML nie jest pogrubiona.
Wartość "normal" jest równoznaczna z wartością 400.
font-weight:normal;
czcionka tekstu tego elementu "div" nie jest pogrubiona
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
czcionka tekstu tego elementu "div" nie jest pogrubiona
</div>
</body>
</html>
Za pomocą wartości bold właściwości font-weight możemy sprawić, że czcionka tekstu interesującego nas elementu HTML zostanie pogrubiona.
Wartość "bold" jest równoznaczna z wartością 700.
font-weight:bold;
czcionka tekstu tego elementu "div" jest pogrubiona, ponieważ do tego elementu "div" została dodana właściwość "font-weight" wraz z wartością "bold"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
font-weight:bold;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
czcionka tekstu tego elementu "div" jest pogrubiona, ponieważ do tego elementu "div" została dodana właściwość "font-weight" wraz z wartością "bold"
</div>
</body>
</html>
Za pomocą właściwości font-weight oraz jednej z dodatkowych wartości reprezentującej grubość relatywną możemy określić grubość czcionki tekstu interesującego nas elementu HTML.
- lighter
-
Wartość lighter właściwości font-weight oznacza, że (jeżeli jest to możliwe) czcionka tekstu interesującego nas elementu HTML powinna posiadać grubość mniejszą od grubości dziedziczonej od elementu rodzica.
- bolder
-
Wartość bolder właściwości font-weight oznacza, że (jeżeli jest to możliwe) czcionka tekstu interesującego nas elementu HTML powinna posiadać grubość większą od grubości dziedziczonej od elementu rodzica.
font-weight:bolder;
czcionka tekstu tego elementu "div" posiada grubość większą od grubości dziedziczonej od elementu "body", ponieważ do tego elementu "div" została dodana właściwość "font-weight" wraz z wartością "bolder"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
font-weight:bolder;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
czcionka tekstu tego elementu "div" posiada grubość większą od grubości dziedziczonej od elementu "body", ponieważ do tego elementu "div" została dodana właściwość "font-weight" wraz z wartością "bolder"
</div>
</body>
</html>
Za pomocą właściwości font-weight oraz jednej z dodatkowych wartości reprezentującej stopień grubości możemy określić grubość czcionki tekstu interesującego nas elementu HTML.
Nie wszystkie rodzaje czcionek tekstu muszą posiadać poszczególne stopnie grubości.
- 100
-
Wartość 100 właściwości font-weight reprezentuje stopień grubości 100.
- 200
-
Wartość 200 właściwości font-weight reprezentuje stopień grubości 200.
- 300
-
Wartość 300 właściwości font-weight reprezentuje stopień grubości 300.
- 400
-
Wartość 400 właściwości font-weight reprezentuje stopień grubości 400.
- 500
-
Wartość 500 właściwości font-weight reprezentuje stopień grubości 500.
- 600
-
Wartość 600 właściwości font-weight reprezentuje stopień grubości 600.
- 700
-
Wartość 700 właściwości font-weight reprezentuje stopień grubości 700.
- 800
-
Wartość 800 właściwości font-weight reprezentuje stopień grubości 800.
- 900
-
Wartość 900 właściwości font-weight reprezentuje stopień grubości 900.
font-weight:700;
czcionka tekstu tego elementu "div" posiada stopień grubości równy 700, ponieważ do tego elementu "div" została dodana właściwość "font-weight" wraz z wartością "700"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
font-weight:700;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
czcionka tekstu tego elementu "div" posiada stopień grubości równy 700, ponieważ do tego elementu "div" została dodana właściwość "font-weight" wraz z wartością "700"
</div>
</body>
</html>