15.1 Wprowadzenie

Ustawianie własności pisma należy do najczęstszych zastosowań arkuszy stylów. Niestety nie istnieje żadna jednolita i ogólnie akceptowana taksonomia fontów a określenia używane do opisu jednej rodziny fontów mogą nie być odpowiednie do opisywania innych rodzin. Na przykład często używanym określeniem pisma pochyłego jest ‚italic’, ale spotyka się również określenia oblique, slanted, incline, cursive oraz kursiv. Z tych powodów nie jest łatwo odnieść typowy zestaw własności fontów do konkretnego fontu.

15.2 Algorytm dopasowywania fontów

Ponieważ nie istnieje żadna uniwersalna taksonomia własności fontów, dopasowywanie własności do różnych krojów należy przeprowadzać wyjątkowo ostrożnie. Własności są dopasowywane w ściśle określonej kolejności. W ten sposób można uzyskać najspójniejsze wyniki w różnych aplikacjach klienckich (przy założeniu, że każda z nich ma taką samą bibliotekę krojów pisma).

1. Aplikacja kliencka tworzy bazę danych (lub uzyskuje do niej dostęp) odpowiednich własności CSS 2.1 wszystkich fontów, o których istnieniu wie. Jeśli wystąpią dwa fonty o dokładnie takich samych własnościach, aplikacja kliencka wybiera jeden z nich.
2. W danym elemencie aplikacja kliencka gromadzi własności fontu dla każdego znaku. Na podstawie pełnego zestawu własności zostaje wstępnie wybrana rodzina fontów przy użyciu własności ‚font-family’. Pozostałe własności zostają sprawdzone w odniesieniu do tej rodziny zgodnie z kryteriami dopasowywania każdej z własności. Jeśli zostaną znalezione dopasowania dla wszystkich pozostałych własności, został znaleziony pasujący krój pisma dla danego elementu lub znaku.
3. Jeśli w rodzinie fontów przetwarzanej w punkcie 2 nie zostanie znaleziony żaden pasujący krój pisma i w zestawie fontów została podana większa liczba rodzin fontów, czynności z punktu 2 zostają powtórzone dla następnej określonej rodziny fontów.
4. Jeśli zostanie znaleziony pasujący krój pisma, ale nie zawierający glifu dla bieżącego znaku i w zestawie fontów jest określona kolejna rodzina fontów, czynności z punktu 2 zostają powtórzone dla następnej rodziny fontów.
5. Jeśli w rodzinie wybranej w punkcie 2 nie ma fontu, zostaje użyty font domyślny aplikacji klienckiej i powtórzony punkt 2 przy zastosowaniu najlepszego dopasowania, jakie można uzyskać w foncie domyślnym. Jeśli przy użyciu tego fontu nie można zaprezentować określonego znaku, aplikacja kliencka może wybrać odpowiedni font do jego zaprezentowania w inny sposób. Aplikacja kliencka powinna każdy znak, dla którego nie ma odpowiedniego fontu zaprezentować widzialnym symbolem wedle własnego wyboru. Najlepiej, jeśli jest to glif "brakującego znaku" z jednego z fontów dostępnych aplikacji.

(Powyższy algorytm można zoptymalizować, aby uniknąć wielokrotnego przeglądania własności CSS 2.1 dla każdego znaku.)

Zasady dopasowywania własności z punktu 2 powyżej są następujące:

1. Najpierw jest sprawdzana własność ‚font-style’. Wartość ‚italic’ zostanie zaakceptowana, jeśli w bazie danych fontów aplikacji klienckiej znajduje się krój pisma oznaczony jako ‚italic’ (preferowany) lub ‚oblique’. Inne wartości muszą zostać dopasowane dokładnie, albo własność ‚font-style’ nie zostanie zastosowana.
2. Następnie jest sprawdzana własność ‚font-variant’. Wartość ‚small-caps’ zostaje dopasowana (1) do fontu oznaczonego jako ‚small-caps’, (2) fontu, w którym małe litery są syntezowane lub (3) fontu, w którym wszystkie małe litery są zastąpione wielkimi literami. Font kapitalikowy można syntezować poprzez elektroniczne skalowanie wielkich liter z normalnego fontu. Wartość ‚normal’ zostaje dopasowana do normalnego wariantu fontu (nie kapitalikowego). Font musi mieć wariant normalny. Font zawierający tylko kapitaliki może zostać wybrany zarówno za pomocą wartości ‚normal’ jak i ‚small-caps’ kroju pisma.
3. Następnie dopasowywana jest wartość własności ‚font-weight’. To dopasowanie zawsze się udaje. (zobacz opis własności ‚font-weight’ poniżej.)
4. Własność ‚font-size’ musi być dopasowywana w marginesie tolerancji aplikacji klienckiej. (Zwykle stopień pisma fontów skalowalnych jest zaokrąglany do najbliższego pełnego piksela, podczas gdy tolerancja dla fontów bitmapowych może wynosić nawet 20%.) Dalsze obliczenia, np. wartości własności ‚em’, są wykonywane na podstawie wartości obliczonej własności ‚font-size’.

15.3 Rodzina fontów: własność ‚font-family’

Wartością tej własności jest lista priorytetowa nazw rodzin fontów i/lub rodzajowych nazw rodzin. W odróżnieniu od innych własności CSS, wartości tej własności są alternatywami oddzielanymi przecinkami:

body { font-family: Gill, Helvetica, sans-serif }

Mimo że w wielu fontach znajduje się glif "brakującego znaku", zwykle otwarte pole, glif taki, jak sama nazwa wskazuje, nie powinien być traktowany jako dopasowanie dla znaków, których nie znaleziono w foncie. (Powinien natomiast być traktowany jako dopasowanie dla znaku U+FFFD — jest to współrzędna kodowa znaku "brakującego znaku".)

Wyróżnia się dwa rodzaje nazw rodzin fontów:

<family-name>

Nazwa wybranej rodziny fontów. W ostatnim przykładzie nazwami rodzin fontów są "Gill" i "Helvetica".

<generic-family>

W powyższym przykładzie rodzajową nazwą rodziny jest ostatnia wartość. Zdefiniowane są następujące rodzaje rodzin:

• ‚serif’ (np. Times)
• ‚sans-serif’ (np. Helvetica)
• ‚cursive’ (np. Zapf-Chancery)
• ‚fantasy’ (np. Western)
• ‚monospace’ (np. Courier)

Zaleca się określanie rodzajowej nazwy rodziny fontów jako ostatniej wartości na liście. Nazwy rodzajowe fontów są słowami kluczowymi, a więc NIE mogą występować w cudzysłowach.

Jeśli nazwa rodziny fontów nie znajdująca się w cudzysłowach zawiera nawiasy kwadratowe i/lub klamrowe, znaki te muszą zostać zapisane w postaci sekwencji specjalnych zgodnie z zasadami CSS. To samo dotyczy cudzysłowów (pojedynczych i podwójnych), średników, wykrzykników, przecinków oraz wiodących ukośników. Nazwy fontów zawierające takie znaki powinny znajdować się w cudzysłowach:

body { font-family: "New Century Schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">

Jeśli cudzysłowy zostaną opuszczone, wszelkie białe znaki znajdujące się przed i za nazwą fontu zostaną zignorowane, a wszelkie sekwencje kilku białych znaków wewnątrz nazwy zostaną zredukowane do jednej spacji. Nazwy rodzin fontów, które brzmią tak samo, jak słowa kluczowe wartości (‚inherit’, ‚serif’, ‚sans-serif’, ‚monospace’, ‚fantasy’ oraz ‚cursive’) muszą być pisane w cudzysłowach, aby nie zostały pomylone z tymi słowami. Słowa kluczowe ‚initial’ i ‚default’ są zarezerwowane na przyszłość i jeśli są używane jako nazwy fontów, również muszą być zapisywane w cudzysłowach. Aplikacje klienckie nie mogą tych słów kluczowych uznawać za pasujące do typu ‚<family-name>’.

15.3.1 Rodzaje rodzin fontów

Rodzajowe rodziny fontów to mechanizm asekuracyjny umożliwiający zachowanie przynajmniej części zamierzonego stylu autora, gdy żaden z określonych fontów nie zostanie znaleziony. Dla optymalnej kontroli nad tekstem, w arkuszach stylów powinno używać się nazw konkretnych fontów.

Wszystkie pięć rodzajowych rodzin fontów z definicji istnieją we wszystkich implementacjach CSS (nie muszą odpowiadać pięciu różnym rzeczywistym fontom). Aplikacje klienckie powinny dokonywać wyboru takich domyślnych rodzajowych rodzin fontów, które jak najlepiej wyrażają cechy całych rodzin przy aktualnych ograniczeniach technologicznych.

Zaleca się, aby aplikacje klienckie umożliwiały użytkownikom wybór alternatywnych fontów rodzajowych.

15.3.1.1 serif

Glify fontów szeryfowych (według terminologii CSS) mają ozdobne elementy, rozszerzone lub zwężone końcówki albo prawdziwe szeryfy (włącznie z szeryfami belkowymi — ang. slab-serif). Typowe fonty szeryfowe są zwykle proporcjonalne. Zwykle różnica między grubymi a cienkimi liniami w tych fontach jest wyraźniejsza niż w fontach bezszeryfowych. W CSS określenie "szeryfowy" jest używane w odniesieniu do wszystkich rodzajów pisma, chociaż w niektórych pismach bardziej znane są inne nazwy, jak np.: Mincho (japoński), Sung albo Song (chiński), Totum lub Kodig (koreański). Każdy font oznaczony w taki sposób może zostać użyty do reprezentowania rodziny rodzajowej ‚serif’.

Przykładowe fonty pasujące do powyższego opisu:

15.3.1.2 sans-serif

Glify w fontach bezszeryfowych (według terminologii CSS) mają proste zakończenia linii — bez rozszerzeń i innych ornamentów. Typowe fonty bezszeryfowe są zwykle proporcjonalne. Różnice między grubymi a cienkimi kreskami są w nich zwykle niewielkie w porównaniu z fontami z rodziny ‚serif’. W CSS określenie "bezszeryfowy" jest używane w odniesieniu do wszystkich rodzajów pisma, chociaż w niektórych pismach bardziej znane są inne nazwy, jak np.: Gothic (japoński), Kai (chiński) lub Pathang (koreański). Każdy font oznaczony w taki sposób może zostać użyty do reprezentowania rodziny rodzajowej ‚sans-serif’.

Przykładowe fonty pasujące do powyższego opisu:

15.3.1.3 cursive

Glify w fontach tego rodzaju (według terminologii CSS) mają albo łączące je kreski, albo inne charakterystyczne cechy odróżniające je od italików. Glify są częściowo lub całkowicie połączone, dzięki czemu tekst bardziej przypomina pismo ręczne lub pędzelkowe niż drukowane. Fonty niektórych pism, np. arabskie, są prawie zawsze pochyłe. W CSS określenie ‚cursive’ dotyczy fontów wszystkich pism, chociaż spotykane są w nazwach fontów także inne określenia, jak np.: Chancery, Brush, Swing czy Script.

Przykładowe fonty pasujące do powyższego opisu:

15.3.1.4 fantasy

Fonty typu ‚fantasy’ (według terminologii CSS) mają przede wszystkim zastosowanie dekoracyjne, chociaż zawierają reprezentacje znaków (w przeciwieństwie do fontów obrazkowych, które nie reprezentują znaków). Przykłady:

15.3.1.5 monospace

Jedynym kryterium, które musi spełniać font aby zostać nazwany nieproporcjonalnym jest jednakowa szerokość wszystkich glifów. (W niektórych pismach, np. arabskim, efekt może być bardzo osobliwy.) Tekst wygląda jakby był napisany na ręcznej maszynie do pisania. Fonty tego typu często wykorzystuje się do prezentowania przykładów kodu komputerowego.

Przykładowe fonty pasujące do powyższego opisu:

15.4 Odmiany stylistyczne kroju pisma: własność ‚font-style’

Własność ‚font-style’ służy do wybierania krojów pisma: normalnego (czasami nazywanego prostym), ‚italic’ lub ‚oblique’ w obrębie jednej rodziny fontów.

Wartość ‚normal’ powoduje wybranie fontu oznaczonego w bazie danych aplikacji klienckiej jako ‚normal’, natomiast wartość ‚oblique’ powoduje wybranie fontu oznaczonego jako ‚oblique’. Wartość ‚italic’ powoduje wybranie fontu oznaczonego jako ‚italic’ lub, jeśli taki jest niedostępny — ‚oblique’.

Font oznaczony jako ‚oblique’ w bazie danych aplikacji klienckiej może być w rzeczywistości elektronicznie pochyloną wersją normalnego fontu.

Fonty, w których nazwach znajdują się słowa Oblique, Slanted lub Incline w bazie fontów aplikacji klienckiej zwykle są oznaczane jako ‚oblique’. Fonty ze słowami Italic, Cursive lub Kursiv w nazwie są zwykle oznaczane jako ‚italic’.

h1, h2, h3 { font-style: italic }
h1 em { font-style: normal }

W powyższym przykładzie tekst znajdujący się w elemencie ‚H1′ zostanie zaprezentowany pismem normalnym.

15.5 Kapitaliki: własność ‚font-variant’

Kolejnym wariantem w obrębie rodziny fontów są kapitaliki. W fontach tego typu małe litery są podobne do wielkich, tylko o mniejszych wymiarach i mają od nich nieco inne proporcje. Do wyboru takiego typu fontu służy własność ‚font-variant’.

Wartość ‚normal’ powoduje użycie fontu nie będącego kapitalikowym. Aby zastosować font kapitalikowy, należy użyć wartości ‚small-caps’. W CSS 2.1 akceptowalne jest (ale nie wymagane) tworzenie fontów kapitalikowych poprzez zamienienie małych liter w normalnym foncie na przeskalowane wielkie litery. W ostateczności w zastępstwie fontu kapitalikowego są używane wielkie litery.

Poniższe reguły spowodują, że tekst w elementach ‚H3′ będzie napisany kapitalikami, a tekst w elementach ‚EM’ będzie napisany pismem pochyłym. Natomiast tekst znajdujący się w elementach ‚H3′ znajdujących się w elementach ‚EM’ będzie napisany pochyłymi kapitalikami:

h3 { font-variant: small-caps }
em { font-style: oblique }

W rodzinie fontów mogą być dostępne jeszcze inne warianty, np. fonty zawierające cyfry w starym stylu, cyfry kapitalikowe, litery skondensowane lub rozstrzelone itp. W CSS 2.1 nie ma własności służących do ich wybierania.

Uwaga: w przypadkach, w których własność ta powoduje zamianę tekstu na wielkie litery, zastosowanie mają te same zasady, co dotyczące własności ‚text-transform’.

15.6 Grubość pisma: własność ‚font-weight’

Własność ‚font-weight’ służy do określania grubości pisma. Wartości od ‚100’ do ‚900’ stanowią sekwencję, w której każda liczba oznacza grubość przynajmniej nie mniejszą od poprzedniej. Słowo kluczowe ‚normal’ jest synonimem wartości ‚400’, a ‚bold’ — ‚700’. Okazało się, że słowa kluczowe inne niż ‚normal’ i ‚bold’ są często mylone z nazwami fontów. Dlatego zdecydowano się na wprowadzenie 9-stopniowej skali liczbowej.

p { font-weight: normal }   /* 400 */
h1 { font-weight: 700 }     /* bold */

Wartości ‚bolder’ i ‚lighter’ określają grubość fontu względem grubości odziedziczonej po rodzicu:

strong { font-weight: bolder }

Fonty (dane fontów) mają zwykle jedną lub więcej własności, których wartości są nazwami opisującymi ich "grubość". Nie ma uniwersalnej zasady określającej znaczenie tych nazw. Ich głównym przeznaczeniem jest rozróżnienie krojów o różnych grubościach w obrębie jednej rodziny fontów. Zastosowania fontów są bardzo różne. Na przykład font, który dla jednej osoby wygląda na pogrubiony, ktoś inny może określić jako Regular, Roman, Book, Medium, Semi- lub DemiBold, Bold, albo Black, w zależności od tego, jak gruby jest "normalny" krój danego fontu w projekcie. Ponieważ nie istnieje standardowy system nazewniczy, wartości CSS 2.1 określające własność pogrubienia są oparte na skali liczbowej, w której wartość ‚400’ (lub ‚normal’) odpowiada "normalnemu" krojowi pisma w danej rodzinie. Określenie grubości takiego kroju to najczęściej Book, Regular, Roman, Normal lub czasami Medium.

Powiązania innych grubości w obrębie rodziny z wartościami liczbowymi mają na celu tylko zachowanie kolejności pogrubień w tej rodzinie. Poniżej znajduje się opis dokonywania tych przypisań w typowych przypadkach:

• Jeśli rodzina fontów używa dziewięciostopniowej skali liczbowej (np. OpenType), grubości pisma powinny być odwzorowywane bezpośrednio.
• Jeśli dostępne są kroje oznaczone jako Medium i Book, Regular, Roman lub Normal, wówczas Medium jest przypisywany wartości ‚500’.
• Font oznaczony jako "Bold" często odpowiada wartości ‚700’.
• Jeśli w rodzinie jest mniej niż 9 stopni, domyślny algorytm wypełniania "luk" jest następujący. Jeśli wartość ‚500’ nie ma przypisania, zostanie jej przypisany ten sam font, co wartości ‚400’. Jeśli którakolwiek z wartości ‚600’, ‚700’, ‚800’ i ‚900’ nie ma przypisania, zostaje jej przypisany ten sam krój, co słowu kluczowemu oznaczającemu większą grubość, jeśli takie istnieje, albo oznaczającemu mniejszą grubość w przeciwnym przypadku. Jeśli którakolwiek z własności ‚300’, ‚200’ i ‚100’ nie ma przypisania, zostaje jej przypisane następne "lżejsze" słowo kluczowe, lub "cięższe" jeśli tamtego nie ma.

Poniżej znajdują się dwa typowe przykłady odwzorowań.

Ponieważ zadaniem słów kluczowych ‚bolder’ i ‚darker’ jest pogrubienie lub rozjaśnienie kroju w obrębie rodziny oraz rodzina może nie zawierać krojów odpowiadających wszystkich wartościom symbolicznym, słowo kluczowe ‚bolder’ dopasowuje kolejny grubszy krój z rodziny, a ‚lighter’ — kolejny jaśniejszy krój z rodziny. Mówiąc bardziej precyzyjnie, znaczenie względnych słów kluczowych ‚bolder’ i ‚lighter’ jest następujące:

• ‚bolder’ wybiera grubość fontu, która jest większa o jeden stopień od odziedziczonej.
• ‚lighter’ działa odwrotnie: wybiera grubość fontu, która jest o jeden stopień mniejsza od odziedziczonej.

Nie ma gwarancji, że dla każdej wartości własności ‚font-weight’ znajdzie się krój o wyższym stopniu pogrubienia. Niektóre fonty na przykład mogą mieć tylko kroje normalny i pogrubiony, podczas gdy inne mają po osiem grubości. Nie ma pewności co do tego, jak aplikacji kliencka odwzoruje kroje pisma w obrębie rodziny na wartości pogrubienia. Jedyna gwarancja jest taka, że kroje o określonej wartości nie będą mniej pogrubione niż kroje o lżejszych wartościach.

15.7 Stopień pisma: własność ‚font-size’

Stopień pisma jest związany z polem znaku (pojęcie zaczerpnięte z poligrafii). Należy zauważyć, że niektóre glify mogą wychodzić poza swoje pola. Opis wartości:

<absolute-size>

Słowo kluczowe typu <absolute-size> jest indeksem w tablicy stopni pisma obliczonych i przechowywanych przez aplikację kliencką. Dostępne wartości to:

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

Poniższa tabela przedstawia powiązania między tymi wartościami bezwzględnymi a nagłówkami i bezwzględnymi wartościami HTML. Wartość ‚medium’ jest preferowanym stopniem pisma użytkownika i służy jako średnia wartość odniesienia.

Wartości bezwzględne CSS	xx-small	x-small	small	medium	large	x-large	xx-large
Stopnie pisma HTML	1		2	3	4	5	6	7

Implementatorzy powinni tworzyć tablice współczynników skalowania dla słów kluczowych rozmiarów bezwzględnych odnoszących się do rozmiaru ‚medium’ oraz konkretnego urządzenia i jego cech (np. rozdzielczości).

Różne media mogą wymagać zastosowania różnych współczynników skalowania. Ponadto aplikacja kliencka przy obliczaniu takiej tablicy powinna wziąć pod uwagę jakość i dostępność fontów. Tablica ta może być różna dla różnych rodzin fontów.

Uwaga 1: w celu zapewnienia czytelności tekstu, aplikacja kliencka stosująca się do tych wskazówek powinna unikać tworzenia rozmiarów pisma składających się z mniejszej liczby niż 9 pikseli na pole znaku na ekranie monitora.

Uwaga 2: w CSS 1 sugerowany współczynnik skalowania między przylegającymi indeksami wynosił 1.5, co okazało się zbyt dużą wartością. W CSS 2 sugerowany współczynnik skalowania dla monitora komputerowego między przylegającymi indeksami wynosił 1.2, co nadal powodowało problemy z małymi rozmiarami. Doświadczenia implementacyjne wykazały, że stały współczynnik między przylegającymi słowami kluczowymi wartości bezwzględnych sprawia problemy. Ta specyfikacja nie zaleca takiego stałego współczynnika.

<relative-size>

Słowo kluczowe typu <relative-size> jest interpretowane względem tablicy rozmiarów pisma oraz rozmiaru pisma elementu nadrzędnego. Dostępne wartości to: [ larger | smaller ]. Jeśli na przykład element nadrzędny ma rozmiar pisma ustawiony na ‚medium’, wartość ‚larger’ spowoduje, że rozmiar pisma bieżącego elementu będzie ‚large’. Jeśli rozmiar elementu nadrzędnego nie jest zbliżony do żadnej pozycji w tablicy, aplikacja kliencka może zastosować wartość spomiędzy pozycji w tablicy lub zaokrąglić wartość do najbliższej z nich. Aplikacja kliencka może zostać zmuszona do ekstrapolowania wartości tablicy, jeśli wartość liczbowa wykracza poza słowa kluczowe.

W przypadku wartości z jednostkami długości i procentowych tablica rozmiarów pisma nie powinna być brana pod uwagę przy obliczaniu rozmiaru pisma elementu.

Wartości ujemne są niedozwolone.

Dla wszystkich innych własności, jednostki ‚em’ i ‚ex’ odnoszą się do obliczonego rozmiaru pisma bieżącego elementu. Dla własności ‚font-size’ jednostki te odnoszą się do obliczonego rozmiaru pisma elementu rodzica.

Należy zauważyć, że aplikacja może ponownie zinterpretować bezpośrednio określony rozmiar w zależności od kontekstu. Na przykład w scenie wirtualnej rzeczywistości fontowi może zostać nadany inny rozmiar z powodu zniekształceń perspektywy.

Przykład:

p { font-size: 16px; }
@media print {
	p { font-size: 12pt; }
}
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }

15.8 Własność zbiorcza pisma: własność ‚font’

‚font’, z wyjątkiem przypadków opisanych poniżej, jest własnością zbiorczą służącą do ustawiania własności ‚font-style’, ‚font-variant’, ‚font-weight’, ‚font-size’, ‚line-height’ oraz ‚font-family’ w jednym miejscu. Składnia tej własności powstała w oparciu o tradycyjną notację skrótową stosowaną w poligrafii do ustawiania wielu własności związanych z pismem.

Wszystkie własności pisma (włącznie z wymienionymi w poprzednim akapicie) zostają najpierw zresetowane do wartości domyślnych. Następnie własnościom, dla których we własności ‚font’ zostały podane wartości zostają odpowiednio ustawione. Aby zapoznać się z definicją wartości dozwolonych i początkowych, zobacz wcześniej zdefiniowane własności.

p { font: 12px/14px sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% "New Century Schoolbook", serif }
p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }

Wartość procentowa (‚80%’) rozmiaru pisma w drugiej regule odnosi się do rozmiaru pisma elementu nadrzędnego. Wartość procentowa określająca wysokość linii w trzeciej regule odnosi się do rozmiaru pisma samego elementu.

W trzech pierwszych z powyższych reguł, własności ‚font-style’, ‚font-variant’ oraz ‚font-weight’ nie zostały bezpośrednio ustawione. Z tego powodu wszystkie one zostaną ustawione na wartość początkową ‚normal’. Czwarta reguła ustawia własność ‚font-weight’ na ‚bold’, ‚font-style’ na ‚italic’ a ‚font-variant’ niejawnie ustawia na ‚normal’.

Piąta reguła ustawia własności: ‚font-variant’ (‚small-caps’), ‚font-size’ (120% rozmiaru pisma rodzica), ‚line-height’ (120% rozmiaru pisma) oraz ‚font-family’ (‚fantasy’). Pozostałe dwie własności — ‚font-style’ i ‚font-weight’ — zostaną ustawione na słowo kluczowe ‚normal’.

Poniższe wartości dotyczą fontów systemowych:

caption

Font używany w elementach sterujących z podpisem (np. przyciski, listy rozwijane itp.).

icon

Font używany w etykietach ikon.

menu

Font używany w menu (np. menu i listach menu).

message-box

Font używany w oknach dialogowych.

small-caption

Font używany w etykietach małych elementów sterujących.

status-bar

Font używany w pasku statusu okna.

Fonty systemowe można ustawiać tylko całościowo, tzn. rodzina fontów, stopień pisma, grubość, styl itp. są ustawiane jednocześnie. Następnie wartości te można zmienić indywidualnie w razie potrzeby. Jeśli na danej platformie nie ma fontu o określonych cechach, aplikacja kliencka powinna znaleźć jakiś rozsądny zamiennik (np. jako font ‚small-caption’ może zostać użyta mniejsza wersja fontu ‚caption’) albo zastosować swój font domyślny. W przypadku zwykłych fontów, jeśli, dla fontu systemowego, któraś z indywidualnych własności nie należy do dostępnych preferencji użytkownika systemu operacyjnego, własności te powinny zostać ustawione na wartości początkowe.

Dlatego własność ta jest "prawie" własnością zbiorczą: fonty systemowe można ustawiać tylko za pomocą tej własności, nie za pomocą samej własności ‚font-family’. Dlatego możliwości tej własności są większe niż tylko suma możliwości obejmowanych przez nią indywidualnych własności. Jednak indywidualnym własnościom, jak ‚font-weight’, nadawane są wartości z fontu systemowego, które można zmieniać niezależnie.

button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
button p { font: menu }
button p em { font-weight: bolder }

button p { font: 600 9px Charcoal }

button p {
  font-family: Charcoal;
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9px;
  line-height: normal;
}