Własność CSS font-weight

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ś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