Własność CSS font-weight

> Dodaj do ulubionych

Własność CSS font-weight ustawia stopień grubości pisma. Zakres dostępnych wartości jest zależny od rodziny fontów i często nie wszystkie z nich są obsługiwane.

Wartości i składnia

Własność CSS font-weight przyjmuje następujące wartości:

  • Słowo kluczowe normal: normalna grubość pisma, ustawienie domyślne.
  • Słowo kluczowe bold: pismo pogrubione, odpowiada wartości liczbowej 700.
  • Słowo kluczowe bolder: grubość pisma większa od odziedziczonej.
  • Słowo kluczowe lighter: grubość pisma mniejsza od odziedziczonej.
  • Liczba całkowita z przedziału od 1 do 1000: Im większa liczba, tym większa grubość pisma.

Przykład:

p {
  font-weight: bold;
}

Poniżej znajduje się bardziej szczegółowy opis niektórych wartości.

Wartości lighter i bolder

Słowa kluczowe lighter i bolder są względne i odnoszą się do grubości pisma odziedziczonej przez element. Podczas wybierania wartości w przypadku ich użycia pod uwagę są brane tylko cztery wartości liczbowe: 100, 400, 700 oraz 900, nawet jeśli dana rodzina fontów obsługuje ich więcej. Ich wybór jest dokonywany według klucza przedstawionego w poniższej tabeli.

Wartość odziedziczona (o)bolderlighter
< 100400Bez zmiany
100 ? o < 350400100
350 ? o < 550700100
550 ? o < 750900400
750 ? o < 900900700
900 ? oBez zmiany700

Wartości liczbowe

Wartością liczbową może być dowolna liczba z przedziału od 1 do 1000. Im jest ona wyższa, tym wyższy stopień grubości pisma oznacza.

Większość fontów zmiennych umożliwia precyzyjną kontrolę grubości pisma w pewnym ciągłym przedziale wartości. Natomiast pozostałe rodzaje fontów obsługują niektóre lub wszystkie wartości z przedziału od 100 do 900 w kroku co 100.

Jeśli font nie obsługuje wartości, która została użyta, to ogólna zasada jest taka, że w przypadku krojów pogrubionych wybierana jest wersja grubsza, a w przypadku krojów cieńszych wybierana jest wersja chudsza. Szczegółowe zasady dokonywania tego wyboru przedstawiają się następująco:

  • Wartość docelowa mieści się w przedziale od 400 do 500:
    1. Przeglądarka szuka obsługiwanej wartości od wartości docelowej do 500.
    2. Jeśli w pierwszym kroku nie uda się wyłonić obsługiwanej wartości, przeglądarka szuka jej od wartości docelowej w dół.
    3. Jeśli nadal nie uda się znaleźć obsługiwanej wartości, przeglądarka szuka jej od wartości 500 w górę.
  • Wartość docelowa jest mniejsza od 400:
    1. Przeglądarka szuka obsługiwanej wartości od wartości docelowej w dół.
    2. Jeśli w pierwszym kroku nie uda się wyłonić obsługiwanej wartości, przeglądarka szuka jej od wartości docelowej w górę.
  • Wartość docelowa jest większa od 500:
    1. Przeglądarka szuka obsługiwanej wartości od wartości docelowej w górę.
    2. Jeśli w pierwszym kroku nie uda się wyłonić obsługiwanej wartości, przeglądarka szuka jej od wartości docelowej w dół.

Zastosowanie

Własność CSS font-weight ma zastosowanie do wszystkich elementów HTML.

Podsumowanie

ZastosowanieWszystkie elementy HTML
Obsługiwane wartości
  • Słowa kluczowe: normal, bold, bolder, lighter
  • Liczby z przedziału od 1 do 1000
Wartość początkowanormal
DziedziczenieTak
SpecyfikacjaCSS Fonts Module Level 4, własność font-weight