Font Family – Rodziny Czcionek

Rodziny czcionek

Po ogólnym podziale czcionek, można przejść do ich rodzin. Rodzina czcionki to wszystkie jej rodzaje, czy warianty w ramach jednej nazwy. Poszczególne czcionki w danej rodzinie mogą różnić się grubością oraz stylem.

Dla przykładu możemy wziąć rodzinę czcionki Arial. Składa się ona z kliku czcionek o różnych stylach. Podstawową czcionką jest regular, to ta, której najczęściej używamy, do długich bloków tekstowych. Czcionki, które w nazwie mają italic (ang. kursywa) są pochylone, natomiast czcionki bold (ang. pogrubienie) oraz black (ang. czarny) są pogrubione w różnym stopniu. Możemy spotkać również czcionki o nazwie narrow (ang. wąski), ich znaki są węższe, takie jakby ściśnięte.

rodzina czcionek font family arial bold black regular italic

font-family

Za pomocą własności font-family (ang. rodziny czcionki) możemy wybrać rodzinę czcionki.

p { font-family: Arial; }

Powyższa deklaracja spowoduje użycie czcionki Arial we wszystkich paragrafach. Hmmm, ale tych czcionek jest chyba dużo i chyba, żeby skorzystać z danej czcionki musimy mieć ją najpierw zainstalowaną w systemie operacyjnym na naszym komputerze. Rzeczywiście czcionek jest bardzo dużo i to czy zadana przez nas czcionka zostanie prawidłowo wyświetlona, zależy od tego czy użytkownik ją posiada na swoim urządzeniu.

Font stack

Własność font-family pozwala nam na zadeklarowanie większej ilości czcionek, w razie gdyby czcionka, którą wybraliśmy była niedostępna. Kolejne czcionki dodajemy po przecinkach, a technika ta zwana jest tzw. font stack (ang. stos czcionek). Możemy dodać dowolną ilość czcionek zapasowych, ale najlepiej, żeby wyglądem zbliżone były do czcionki przez nas preferowanej, czyli tej pierwszej w kolejce.

p { font-family: Arial, Helvetica, sans-serif; }

Zapis ten oznacza, że jeśli w systemie nie zostanie odnaleziona czcionka Arial, następna czcionka z listy (Helvetica) zostanie użyta itd. Dobrą praktyką jest dodanie na końcu stosu czcionek, typu preferowanej czcionki. Czcionka Arial jest czcionką bezszeryfową, dlatego na końcu dodajemy sans-serif.

Jeśli nazwa czcionki jest dwuczłonowa umieszczamy ją w  cudzysłowach podwójnych " " bądź pojedynczych  ' '.

p { font-family: 'Helvetica Neue', Helvetica, sans-serif; }
Jeśli masz czas i ochotę sprawdź mój nowy projekt Zdalny Ninja. Jest to serwis poświęcony Pracy Zdalnej. Zachęcam Cię już teraz do wpisania się na listę osób, które jako pierwsze dowiedzą się, że projekt wystartował.