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
dziedziczenie
  • tak
wartość initial
wyjątki initial
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

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

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

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

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