Kurs HTML

Wprowadzenie: Wybór kroju pisma

Jednym z najważniejszych aspektów typografii na stronie internetowej jest wybór odpowiedniego kroju pisma (czcionki). W CSS, do określenia preferowanej czcionki lub listy czcionek dla tekstu elementu, służy właściwość font-family.

Przeglądarka spróbuje użyć pierwszej czcionki z listy, która jest dostępna w systemie użytkownika lub została załadowana jako font webowy. Jeśli pierwsza czcionka nie jest dostępna, spróbuje użyć drugiej, i tak dalej. Dlatego ważne jest, aby zawsze na końcu listy podać ogólną rodzinę czcionek (np. serif, sans-serif) jako ostateczny fallback.

Właściwość font-family

Wartością właściwości font-family jest lista nazw czcionek lub ogólnych rodzin czcionek, oddzielonych przecinkami.

Składnia:

element {
  font-family: "Preferowana Czcionka", "Inna Czcionka", "Jeszcze Inna", ogólna-rodzina;
}Kopiuj

• Nazwy czcionek: Jeśli nazwa czcionki zawiera spacje lub znaki specjalne, należy ją ująć w cudzysłów (pojedynczy lub podwójny), np. "Times New Roman", "Courier New". Nazwy jednowyrazowe (np. Arial, Verdana) nie wymagają cudzysłowów, ale ich użycie nie jest błędem.
• Ogólne rodziny czcionek (Generic Font Families): Są to słowa kluczowe reprezentujące kategorie czcionek o podobnym wyglądzie. Przeglądarka użyje domyślnej czcionki systemowej z danej rodziny, jeśli żadna z wcześniejszych nazwanych czcionek nie będzie dostępna. Najważniejsze rodziny to:
  • serif: Czcionki szeryfowe (z "ogonkami"), np. Times New Roman, Georgia.
  • sans-serif: Czcionki bezszeryfowe (bez "ogonków"), np. Arial, Verdana, Helvetica.
  • monospace: Czcionki o stałej szerokości znaków (maszynowe), np. Courier New, Monaco.
  • cursive: Czcionki imitujące pismo odręczne (kursywa).
  • fantasy: Czcionki dekoracyjne, ozdobne.
  Zawsze należy podać przynajmniej jedną ogólną rodzinę na końcu listy font-family.

Przykład (Font Stack):

body {
  /* Preferuj Roboto, jeśli dostępna; jeśli nie, użyj Helvetici, potem Ariala, 
     a jako ostateczny fallback - dowolnej czcionki bezszeryfowej */
  font-family: Roboto, Helvetica, Arial, sans-serif; 
}

h1 {
  /* Dla nagłówków preferuj Georgię, potem Times New Roman, a na końcu dowolną szeryfową */
  font-family: Georgia, "Times New Roman", serif;
}

code, pre {
  /* Dla kodu używaj czcionek monospaced */
  font-family: "Courier New", Monaco, monospace;
}Kopiuj

Taka lista preferowanych czcionek wraz z fallbackami nazywana jest często **"font stack"**.

Bezpieczne fonty systemowe (Web Safe Fonts)

Przez wiele lat projektanci stron byli ograniczeni do używania tzw. **"bezpiecznych fontów systemowych"** (web safe fonts). Są to czcionki, które są powszechnie preinstalowane na większości systemów operacyjnych (Windows, macOS, Linux).

Przykłady popularnych bezpiecznych fontów:

• Sans-serif: Arial, Helvetica, Verdana, Tahoma, Trebuchet MS, Geneva
• Serif: Times New Roman, Georgia, Garamond, Times
• Monospace: Courier New, Monaco, Lucida Console

Tworząc font stack oparty na tych czcionkach, można mieć stosunkowo dużą pewność, że strona będzie wyglądać podobnie na różnych urządzeniach.

Fonty webowe (Web Fonts) i @font-face

Ograniczenie do bezpiecznych fontów systemowych było dużym problemem dla projektantów. Rozwiązaniem stały się **fonty webowe (web fonts)**. Pozwalają one na dołączenie plików czcionek (np. w formatach WOFF, WOFF2, TTF, OTF) do strony internetowej, dzięki czemu przeglądarka może je pobrać i użyć, nawet jeśli nie są zainstalowane w systemie użytkownika.

Do ładowania fontów webowych służy reguła CSS @font-face.

Składnia @font-face:

@font-face {
  font-family: "NazwaMojejCzcionki"; /* Nazwa, której będziesz używać w font-family */
  src: url("sciezka/do/pliku/czcionki.woff2") format("woff2"), /* Preferowany format */
       url("sciezka/do/pliku/czcionki.woff") format("woff");   /* Fallback dla starszych przeglądarek */
  /* Opcjonalnie: */
  font-weight: 400; /* Normalna waga */
  font-style: normal;
  font-display: swap; /* Kontrola nad wyświetlaniem podczas ładowania */
}

/* Można zdefiniować wiele @font-face dla różnych wag i stylów tej samej rodziny */
@font-face {
  font-family: "NazwaMojejCzcionki";
  src: url("sciezka/do/pliku/czcionki-bold.woff2") format("woff2"),
       url("sciezka/do/pliku/czcionki-bold.woff") format("woff");
  font-weight: 700; /* Pogrubiona waga */
  font-style: normal;
  font-display: swap;
}

/* Użycie zdefiniowanej czcionki */
body {
  font-family: "NazwaMojejCzcionki", sans-serif; /* Użyj załadowanej czcionki, z fallbackiem */
}

b {
  /* Przeglądarka automatycznie użyje wersji bold zdefiniowanej w @font-face */
  font-weight: bold; 
}Kopiuj

• font-family: Definiuje nazwę, pod którą czcionka będzie dostępna w CSS.
• src: Określa ścieżkę do pliku czcionki (lub listę ścieżek dla różnych formatów). Zaleca się podawanie formatów woff2 (najlepsza kompresja) i woff (szerokie wsparcie).
• format(): Pomaga przeglądarce zidentyfikować format pliku czcionki.
• font-weight / font-style: Pozwalają zdefiniować, której konkretnej wersji (np. normalnej, pogrubionej, kursywy) dotyczy dany plik czcionki. Dzięki temu przeglądarka wie, który plik załadować, gdy użyjesz np. font-weight: bold;.
• font-display: Kontroluje, jak tekst jest wyświetlany, zanim czcionka webowa zostanie w pełni załadowana (np. swap pokazuje najpierw czcionkę systemową, a potem podmienia ją na webową).

Serwisy z fontami webowymi (np. Google Fonts)

Samodzielne hostowanie plików czcionek i konfigurowanie @font-face może być kłopotliwe. Dlatego bardzo popularne stały się serwisy oferujące gotowe fonty webowe do łatwego użycia, takie jak **Google Fonts**.

Korzystanie z Google Fonts jest proste:

1. Wybierz czcionkę (lub czcionki) na stronie fonts.google.com.
2. Wybierz interesujące Cię style (wagi, kursywa).
3. Google Fonts wygeneruje kod, który należy umieścić w sekcji <head> Twojego HTML (zazwyczaj link do arkusza CSS hostowanego przez Google) lub reguły @import do Twojego CSS.
4. Następnie możesz używać wybranej czcionki w swojej właściwości font-family, zgodnie z instrukcją podaną przez Google Fonts.

<!-- Przykład linku z Google Fonts w <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto:wght@400;900&display=swap" rel="stylesheet">Kopiuj

/* Użycie czcionek załadowanych z Google Fonts */
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

h1, h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

strong {
  font-weight: 900; /* Użyje Roboto 900, jeśli załadowano */
}Kopiuj

Zalety serwisów jak Google Fonts: Łatwość użycia, duży wybór darmowych czcionek, optymalizacja (Google serwuje odpowiednie formaty plików dla różnych przeglądarek), potencjalne cachowanie czcionek przez przeglądarkę użytkownika (jeśli odwiedzał inne strony używające tej samej czcionki z Google Fonts).