Rodzina czcionek

Dane w pigułce
Zastosowanie	określa rodzinę czcionek
Dziedziczenie	tak
Wartości	nazwy czcionek lub nazwy rodzin czcionek
Wartość domyślna	określana przez przeglądarkę
Przykład	font-family: Arial, Helvetica, sans-serif
Uwagi	wielowyrazowe nazwy czcionek należy umieszczać w cudzysłowie lub apostrofach, np. "Times New Roman"
Odpowiednik w HTML	font face (przestarzały)

Aby zdefiniować rodzinę czcionek, należy wpisać w definicji stylu font-family: czcionka.

Gdybyśmy sobie zażyczyli, aby akapit był wyświetlany za pomocą czcionki Times New Roman, możemy napisać

<p style="font-family: 'Times New Roman'">Treść akapitu</p>

Efekt będzie następujący:

To jest akapit napisany za pomocą czcionki Times

Analogicznie, możemy podać czcionkę Courier:

To jest akapit napisany za pomocą czcionki Courier

Tytuł napisany czcionką monotypiczną:

Tytuł napisany czcionką monotypiczną

Ponieważ nie wiemy dokładnie, jakimi czcionkami dysponuje czytelnik strony, możemy się zabezpieczyć, podając kilka kolejnych czcionek, np:

<p style="font-family: Times, Georgia'">Treść akapitu</p>

To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki.

Proszę zwrócić uwagę, że gdy podajemy kilka czcionek, rozdzielamy je przecinkami i spacją. Gdy czcionka ma kilka wyrazów w nazwie, ujmujemy je w apostrof ', podczas gdy cała definicja jest objęta cudzysłowem.

Możemy także poslużyć się nazwą rodzajową, np. serif, co jeszcze bardziej zwiększa szansę, że akapit zostanie wyświetlony czcionką szeryfową, gdyby zabrakło w systemie czytelnika czcionek Times, Times New Roman itd.

<p style="font-family: serif">Treść akapitu</p>

To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki szeryfowej.

Możemy wykorzystywać także inne nazwy rodzajowe, np. sans-serif, cursive, fantasy, monospace. A oto przykłady (niektóre wyświetlane z błędami):

To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki bezszeryfowej.

To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki pochyłej.

To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki ozdobnej.

To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki monotypicznej.

Wynik wyświetlania może być odmienny w każdym konkretnym przypadku i nie można przewidzieć, jaka konkretna czcionka jest angażowana do wyświetlania. Znamy tylko jej nazwę rodzajową.

Oczywiście można mieszać definicje, podając nazwy imienne i rodzajowe, np. "Times, 'Times New Roman', serif".

Interpretacja: Internet Explorer, Mozilla, Opera

Naturalnie, zagnieżdżając definicje w nagłówku HEAD, możemy rozbudować system klas, tworząc jakiś dominujący styl dla zwykłych akapitów oraz kilka stylów z klasami dla szczególnych przypadków, jak akapity zawierające przypisy, istotne uwagi itd. Rzecz jasna, możemy korzystać jednocześnie i ze stylów zagnieżdżonych, i z lokalnych, a nawet ze stylów zewnętrznych, zawartych na innych stronach. Opisujemy to w rozdziałach poświęconych klasom i wstawianiu stylów. Należy też pamiętać o zasadach pierwszeństwa obowiązujących w takiej kaskadzie stylów.

W specyfikacji stylów CSS2 pojawiły się też nazwy fontów systemowych, które można wykorzystywać w definicjach czcionek. Fonty systemowe mogą odmiennie wyglądać w różnych systemach operacyjnych.

<p style="font: menu">akapit z czcionką menu</p>

akapit z czcionką caption

akapit z czcionką icon

akapit z czcionką menu

akapit z czcionką message-box

akapit z czcionką small-caption

akapit z czcionką menu-bar

Nawiasem mówiąc...

Nawiasem mówiąc, akapit wyświetlany za pomocą czcionki systemowej menu wygląda całkiem elegancko, co właśnie prezentuje tych kilka słów.
Można jej użyć na przykład do publikowania jakichś krótkich wiadomości.

Interpretacja: Internet Explorer, Mozilla, Opera