Ostatnio edytowany:

font-weight

Autor: Virtual Patriot

Opis właściwości font-weight

Za pomocą właściwości font-weight możemy określić grubość czcionki tekstu interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości font-weight

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

tak

wartość initial

normal

wyjątki initial

h1, h2, h3, h4, h5, h6, strong, b, th

animowanie

tak

Interpretacja właściwości font-weight

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości font-weight

normal

Opis

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.

Przykład

  font-weight:normal;
czcionka tekstu tego elementu "div" nie jest pogrubiona

Kod źródłowy przykładu

<!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:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      czcionka tekstu tego elementu "div" nie jest pogrubiona
    </div>

  </body>
</html>

bold

Opis

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.

Przykład

  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"

Kod źródłowy przykładu

<!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:#CBFFFF;
      }
    </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>

grubość relatywna

Opis

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.

Dodatkowe wartości właściwości font-weight reprezentujące poszczególne grubości relatywne

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.

Przykład

  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"

Kod źródłowy przykładu

<!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:#CBFFFF;
      }
    </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>

stopień grubości

Opis

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.

Dodatkowe wartości właściwości font-weight reprezentujące poszczególne stopnie grubości

Ważne

wartości od 100 do 500 z reguły określają ten sam (mały) stopień grubości czcionki tekstu elementu HTML. Wartości od 600 do 700 z reguły określają ten sam (większy) stopień grubości czcionki tekstu elementu HTML. Wartości od 800 do 900 (lub od 600 do 900) z reguły określają ten sam (największy) stopień grubości czcionki tekstu elementu HTML.

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.

Przykład

  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"

Kod źródłowy przykładu

<!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:#CBFFFF;
      }
    </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>