Kurs HTML

Wprowadzenie: Kontrola grubości tekstu

Właściwość font-weight w CSS służy do określania grubości (wagi) znaków czcionki. Pozwala ona na wybór między różnymi wariantami grubości dostępnymi dla danej rodziny czcionek, od bardzo cienkich (light) do bardzo grubych (black).

Dostępność różnych wag zależy od tego, jakie warianty zostały zaprojektowane dla konkretnej czcionki i czy odpowiednie pliki (lub style w przypadku fontów systemowych) są dostępne dla przeglądarki.

Wartości dla font-weight

Właściwość font-weight może przyjmować następujące wartości:

• Słowa kluczowe (absolutne):
  • normal: Normalna grubość czcionki. Zazwyczaj odpowiada wartości liczbowej 400. Jest to wartość domyślna.
  • bold: Pogrubiona czcionka. Zazwyczaj odpowiada wartości liczbowej 700.
• Słowa kluczowe (relatywne):
  • lighter: Czcionka o wadze lżejszej niż waga odziedziczona po rodzicu (o ile dostępna jest lżejsza waga).
  • bolder: Czcionka o wadze cięższej niż waga odziedziczona po rodzicu (o ile dostępna jest cięższa waga).
• Wartości liczbowe:
  • Od 100 do 900 (wielokrotności 100). Definiują precyzyjnie wagę czcionki, gdzie 100 to najcieńsza, a 900 to najgrubsza dostępna waga.
  • 400 odpowiada normal.
  • 700 odpowiada bold.
  • Popularne wagi i ich przybliżone nazwy (mogą się różnić w zależności od czcionki):
    • 100 - Thin (Hairline)
    • 200 - Extra Light (Ultra Light)
    • 300 - Light
    • 400 - Normal (Regular)
    • 500 - Medium
    • 600 - Semi Bold (Demi Bold)
    • 700 - Bold
    • 800 - Extra Bold (Ultra Bold)
    • 900 - Black (Heavy)

p {
  font-weight: normal; /* lub font-weight: 400; */
}

strong, b {
  font-weight: bold; /* lub font-weight: 700; */
}

h1 {
  font-weight: 900; /* Najgrubsza dostępna waga */
}

.subtelny-naglowek {
  font-weight: 300; /* Cienka czcionka (Light) */
}

.wzglednie-lzejszy {
  font-weight: lighter; /* Lżejszy niż rodzic */
}

.wzglednie-grubszy {
  font-weight: bolder; /* Grubszy niż rodzic */
}Kopiuj

Dostępność wag czcionek i @font-face

To, czy ustawienie np. font-weight: 300; faktycznie wyświetli czcionkę "Light", zależy od tego, czy:

1. Używana rodzina czcionek (font-family) posiada wariant o takiej wadze.
2. Jeśli jest to font systemowy, czy jest on zainstalowany w systemie użytkownika.
3. Jeśli jest to font webowy, czy odpowiedni plik czcionki dla tej wagi został zdefiniowany i załadowany za pomocą reguły @font-face.

Jeśli przeglądarka nie znajdzie dokładnej wagi zdefiniowanej w font-weight, spróbuje znaleźć najbliższą dostępną wagę. W przypadku użycia słów kluczowych lighter i bolder, przeglądarka wybierze odpowiednio lżejszą lub cięższą wagę z dostępnych wariantów względem wagi rodzica.

Przykład definicji wag w @font-face (przypomnienie z poprzedniej lekcji):

@font-face {
  font-family: "MojaCzcionka";
  src: url("czcionka-regular.woff2") format("woff2");
  font-weight: 400; /* Normal */
}

@font-face {
  font-family: "MojaCzcionka";
  src: url("czcionka-light.woff2") format("woff2");
  font-weight: 300; /* Light */
}

@font-face {
  font-family: "MojaCzcionka";
  src: url("czcionka-bold.woff2") format("woff2");
  font-weight: 700; /* Bold */
}

/* Użycie */
body {
  font-family: "MojaCzcionka", sans-serif;
  font-weight: 400; /* Użyje czcionka-regular.woff2 */
}

h2 {
  font-weight: 300; /* Użyje czcionka-light.woff2 */
}

strong {
  font-weight: 700; /* Użyje czcionka-bold.woff2 */
}Kopiuj

Dzięki poprawnemu zdefiniowaniu wag w @font-face, przeglądarka wie, który plik czcionki załadować dla określonej wartości font-weight.

Syntetyczne pogrubienie (Faux Bold)

Co się stanie, jeśli ustawisz font-weight: bold; (lub 700), ale dla danej czcionki nie jest dostępny wariant pogrubiony (ani systemowy, ani załadowany przez @font-face)?

W takiej sytuacji przeglądarka może spróbować **syntetycznie pogrubić** dostępną czcionkę (zazwyczaj wariant normalny). Efekt ten, nazywany "faux bold", często wygląda nienaturalnie, znaki mogą być zniekształcone lub rozmyte. Jest to generalnie niepożądane z punktu widzenia jakości typografii.

Dlatego ważne jest, aby upewnić się, że używasz wag czcionek, które są faktycznie dostępne dla wybranej rodziny czcionek, zwłaszcza jeśli ładujesz fonty webowe.