Własność CSS font-family

Własność CSS font-family określa uszeregowaną pod względem ważności listę fontów, które mają być używane do renderowania tekstu wybranego elementu na stronie internetowej.

Prosty przykład:

p {
  font-family: Verdana, sans-serif;
}

Jeśli przeglądarka znajdzie w systemie rodzinę fontów o nazwie Verdana, to wyrenderuje tekst przy jej użyciu. Jeśli się jej to nie uda, to wybierze jakąkolwiek dostępną rodzinę fontów bezszeryfowych.

Aby wyrenderować napotkany znak, przeglądarka internetowa przegląda po kolei rodziny fontów z listy własności font-family i wybiera pierwszą dostępną, która go zawiera. Potem przeglądarka przechodzi do następnego znaku i powtarza ten proces. W efekcie może się zdarzyć, że jedno słowo będzie wyrenderowane przy użyciu więcej niż jednego fontu. Sytuacja taka może się zdarzyć, gdy na pierwszym miejscu listy rodzin fontów znajdzie się taka rodzina, która zawiera tylko litery alfabetu łacińskiego, a na drugim rodzina zawierająca także znaki alfabetu polskiego, po czym lista ta zostanie użyta do wyrenderowania tekstu w języku polskim, np.:

@font-face {
  font-family: Hussar;
  src: url("HussarBoldWebEdition-xq5O.otf");
  unicode-range: U+0061-007A;
}
p {
  font-family: Hussar, "Times New Roman";
}

W tym przykładzie reguła @font-face dodaje do arkusza stylów font o nazwie Hussar Bold Web Edition, który zawiera także litery typowe dla alfabetu polskiego, takie jak ą, ę, ć itd. Jednak za pomocą deskryptora unicode-range zakres dostępnych znaków z tego fontu został ograniczony tylko do małych liter alfabetu łacińskiego.

Z kolei reguła dotycząca akapitów zawiera definicję własności font-family, zgodnie z którą pierwszym wyborem jest font Hussar Bold Web Edition, a drugim – rodzina fontów Times New Roman. Z powodu braku wielkich liter i liter typowych dla alfabetu polskiego w foncie Hussar, część tekstu zostanie wyrenderowana przy użyciu kroju pisma Hussar, a część przy użyciu kroju pisma Times New Roman, jak widać na poniższym zrzucie ekranu^*:

Gdybyśmy we własności font-family zmienili drugą pozycję np. na Comic Sans MS, to polskie litery zostałyby wyrenderowane przy użyciu tego kroju pisma:

p {
  font-family: font, "Comic Sans MS";
}

Efekt:

Wartości i składnia

Jako wartość własność font-family przyjmuje listę rozdzielanych przecinkami nazw rodzin fontów dostępnych w urządzeniu lub fontów dołączonych do arkusza stylów przez użytkownika, która powinna być zakończona nazwą fontu rodzajowego, choć nie jest to obowiązkowe.

Kolejność elementów na tej liście ma znaczenie – pierwsza pozycja oznacza pierwszy wybór, druga – drugi wybór itd. Przeglądarka wybierze pierwszy font, który uda się jej załadować z jakiegokolwiek źródła.

Na końcu listy zawsze powinno się umieścić nazwę fontu rodzajowego na wypadek, gdyby przeglądarce nie udało się znaleźć żadnej wcześniejszej pozycji z tej listy, np.:

p {
  font-family: Helvetica, Arial, Verdana, Tahoma, "Trebuchet MS", sans-serif;
}

Jeśli przeglądarce nie uda się znaleźć żadnej z pięciu pierwszych rodzin fontów, to użyje ona rodzajowego bezszeryfowego fontu systemowego. Warto też wiedzieć, że nowe nazwy fontów rodzajowych definiuje się za pomocą składni funkcyjnej w formie generic(nazwa), np.:

font-family: "Noto Nastaliq Urdu", generic(nastaliq), serif;

Zgodnie z dobrym zwyczajem nazwy fontów składające się z kilku członów rozdzielonych spacjami oraz zawierające cyfry i znaki interpunkcyjne inne niż łączniki powinny być ujęte w cudzysłów, co pozwala wykluczyć ryzyko ewentualnej pomyłki lub błędnej interpretacji zamiaru projektanta przez przeglądarkę. Niemiej jednak brak cudzysłowu w takim przypadku nie stanowi błędu składni.

Należy jednak pamiętać, że rodzajowych nazw fontów nie można umieszczać w cudzysłowie, ponieważ wtedy zostaną zinterpretowane jako nazwy zwykłych rodzin fontów.

Nazwy fontów rodzajowych

Nazwa fontu rodzajowego to słowo kluczowe odnoszące się do rodziny fontów określonego typu zainstalowanej w urządzeniu. Poniżej znajduje się lista nazw fontów rodzajowych dostępnych w CSS, wraz z krótkimi opisami.

Zastosowanie

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

Podsumowanie

* Źródło cytatu: Jan Himilsbach, Baśka brudas