Określanie właściwości czcionki należy do najczęściej wtykorzystywanych możliwości CSS. Niestety, nie istnieje żadna jednolita taksonomia klasyfikująca czcionki, przez co terminy dobrze opisujące właściwości jednej czcionki mogą nie być właściwe do opisu innych czcionek. Np. italic to najczęściej używane słowo i wartość określająca tekst pochyły, ale nie jedyna. Inne to: Oblique, Slanted, Incline, Cursive lub Kursiv. Sytuacja ta sprawia, że niezwykle trudno jest określić typowy zestaw własności dla danej czcionki.

W CSS 1 zdefiniowane zostały następujące własności czcionki: font-family, font-style, font-variant i font-weight, font-size oraz font

5.2.1 Dopasowywanie czcionek

Ze względu na brak uniwersalnej taksonomii własności czcionek, ich dopasowywanie musi odbywać się przy zachowaniu szczególnej ostrożności. Własności dopasowywane są w ustalonej kolejności, co umożliwia do pewnego stopnia jednolitość sposobu prezentacji tekstu w różnych aplikacjach klienckich (zakładając, że każda z nich dysponuje podobnym zestawem czcionek).

1. Klient tworzy (lub otwiera) bazę danych wszystkich własności CSS 1 dostępnych dla wszystkich czcionek, do których ma dostęp (zainstalowanych lub pobranych z internetu). Jeżeli dwie czcionki mają identyczne własności, to jedna z nich jest odrzucana.
2. Klient zbiera informacje na temat wszystkich dostępnych własności czcionki mających zastosowanie do każdego znaku znajdującego się w danym elemencie. Dysponując tymi informacjami, klient dokonuje wstępnego wyboru czcionki przy pomocy własności font-family. Następnie, wszystkie pozostałe własności poddawane są testowi zgodności z wybraną rodziną czcionek i jeżeli każda z nich przejdzie test pomyślnie, to wybrana czcionka zostaje zastosowana do danego elementu.
3. Jeżeli żadna czcionka nie zostanie dopasowana w wyniku działań w punkcie 2 i podano alternatywną rodzinę czcionek, to należy powtórzyć czynności z punktu 2 dla tej rodziny.
4. Jeżeli uda się znaleźć pasującą czcionkę, ale brakuje jakiegoś znaku, a dostępna jest alternatywna rodzina czcionek, to należy powtórzyć czynności z punktu 2 dla tej rodziny. Sposób kodowania czcionek i znaków wyjaśniono w Dodatku C.
5. Jeżeli nie uda się dopasować żadnej czcionki, należy użyć domyślnej rodziny czcionek klienta i powtórzyć czynności z punktu 2.

Powyższy algorytm można zoptymalizować unikając sprawdzania własności CSS dla każdego znaku.

Kolejność dopasowywania każdej własności w punkcie 2 powyżej jest następująca:

1. Jako pierwsza sprawdzana jest własność font-style. Aby tekst był pochyły (italic) klient musi posiadać w swojej bazie danych czcionkę ze słowem kluczowym italic (preferowane) lub oblique. W przeciwnym przypadku wartości muszą pasować dokładnie lub styl nie wywoła żadnego efektu.
2. Druga z kolei własność to font-variant. Wartość normal pasuje do czcionek nie oznaczonych jako small-caps. Wartość small-caps, natomiast pasuje do: (1) czcionek oznaczonych jako small-caps, (2) czcionek, w których małe litery zostały zsyntetyzowane, (3) czcionek, w których wszystkie małe litery zastępowane są wielkimi literami. Małe litery można syntetyzować za pomocą elektronicznego skalowania wielkich liter.
3. Jako trzecia testowana jest własność font-weight. Własność ta zawsze wywołuje pożądany efekt.
4. Jako ostatnia dopasowywana jest własność font-size a jego wartość jest uzależniona w pewnym stopniu od marginesu tolerancji klienta (zazwyczaj wielkość czcionki jest zaokrąglana do pełnego piksela, natomiast tolerancja czcionek bitmapowych może sięgać nawet do 20%). Późniejsze obliczenia, np. przy użyciu elementu em dokonywane są na bazie rzeczywistej wielkości czcionki, a nie na tej, którą określono pierwotnie w arkuszu stylów.

5.2.2 font-family

Wartości: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Wartość domyślna: zależna od klienta
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

W polu wartość znajduje się uszeregowana pod względem ważności lista nazw i rodzin czcionek. W przeciwieństwie do większości innych własności CSS 1, wartości własności font-family oddzielone są przecinkami, co oznacza, że nie wykluczają one siebie nawzajem i mogą być stosowane razem.

BODY { font-family: gill, helvetica, sans-serif }

Istnieją dwa typy wartości dla własności font-family:

<family-name>
Nazwa rodziny czcionek. W przykładzie powyżej nazwami czcionek są "gill" oraz "helvetica". <generic-family>
Rodzaj czcionek. W powyższym przykładzie "sans-serif" jest nazwą rodzaju czcionek. Dostępne są następujące rodzaje czcionek:

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

Zaleca się zawsze podawać na końcu deklaracji nazwę rodzajową czcionki.

Nazwy czcionek zawierające białe znaki powinny być ujmowane w cudzysłowy:

BODY { font-family: "new century schoolbook", serif }

<BODY STYLE="font-family: My own font, fantasy">

Ujmowanie tego typu nazw czcionek w nawiasy jest ważne ze względu na fakt, że wszelkie białe znaki przed i po nazwie czcionki są ignorowane, a dłuższe sekwencje białych znaków wewnątrz nazwy redukowane są do znaków pojedynczych.

5.2.3 font-style

Wartości: normal | italic | oblique
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Napotykając wartość normal, klient przeszukuje swoją bazę danych w poszukiwaniu czcionek z tą właśnie etykietą. Podobnie wygląda sytuacja z wartością oblique. Wartość italic, natomiast pasuje do czcionek z kategorii zarówno italic lub, jeżeli takich nie ma, oblique.

Czcionki oznaczone jako oblique mogą być zwykłymi czcionkami pochylonymi komputerowo.

Czcionki zawierające w nazwie słowo Oblique, Slanted lub Incline w bazie danych klienta zazwyczaj zaliczane są do kategorii oblique. Natomiast czcionki ze słowem Italic, Cursive lub Kursiv w nazwie należą do kategorii italic.

H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }

Powyższy przykład spowoduje wyświetlenie wyróżnionego tekstu, znajdującego się wewnątrz nagłówka H1 czcionką normalną.

5.2.4 font-variant

Wartości: normal | small caps
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Małe kapitaliki (small-caps), to znaki o wyglądzie wielkich liter, ale rozmiarami odpowiadające małym literom o nieco zmienionych proporcjach.

Wartość normal dobiera czcionki, nie będące małymi kapitalikami, które dopasowywane są przez wartość small-caps. W CSS 1 dopuszczalne jest (ale nie wymagane), tworzenie małych kapitalików przy pomocy skalowania zwykłej czcionki. W ostateczności wielkie litery mogą zostać użyte w miejsce brakujących kapitalików.

Poniższy przykład spowoduje wyświetlenie zawartości elementu H3 małymi kapitalikami, a słów wyróżnionych (znajdujących się wewnątrz elementu EM) pochylonymi małymi kapitalikami.

H3 { font-variant: small-caps }
EM { font-style: oblique }

Oczywiście istnieje więcej różnych rodzajów czcionek, ale CSS 1 obsługuje tylko wyżej wymienione.

CSS1 core: Jako że własność ta powoduje transformację tekstu do wielkich liter, to zastosowanie tutaj mają zasady dotyczące własności text-transform.

5.2.5 font-weight

Wartości: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Własność font-weight służy do określania sposobu pogrubienia czcionki. Wartości od 100 do 900 oznaczają odpowiednio czcionkę najmniej i najbardziej pogrubioną. Słowo kluczowe normal jest synonimem wartości liczbowej 400, a słowo bold jest odpowiednikiem wartości 700. Na zastosowanie numerycznej skali zdecydowano się ze względu na fakt, że słowa kluczowe inne niż normal i bold były często mylone z nazwami czcionek.

P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 }     /* bold */

Wartości bolder i lighter służą do określania grubości czcionki względem grubości odziedziczonej od elementu nadrzędnego.

STRONG { font-weight: bolder }

Elementy potomne dziedziczą rzeczywistą grubość czcionki, a nie jej wartość słowną.

Czcionki zazwyczaj posiadają jedną lub więcej własności, których wartości wskazują na "grubość" danej czcionki. Nie istnieją żadne oficjalne regulacje dotyczące znaczenia tych nazw. Ich głównym zadaniem jest rozróżnienie czcionek o różnym odcieniu w obrębie jednej rodziny. W różnych rodzinach czcionek, nazwy te mogą mieć inne znaczenie. Np. czcionka pogrubiona może być opisywana jako: Regular, Roman, Book, Medium, Semi lub DemiBold, Bold lub Black w zależności jak ciemna jest "normalna" czcionka w danym projekcie. Ze względu na brak jednolitych standardów używania nazw czcionek, własność font-weight operuje skalą numeryczną, w której 400 (lub normal) odpowiada normalnej grubości czcionki zdefiniowanej dla danej rodziny. Nazwy odnoszące się do grubości czcionki to zazwyczaj: Book, Regular, Roman, Normal lub rzadziej Medium.

Dopasowanie wartości grubości czcionki w obrębie jednej rodziny, do różnych wartości numerycznych ma na celu umożliwienie stopniowania tonacji czcionek. Poniżej znajduje się objaśnienie sposobu przypisywania różnym słowom kluczowym ich odpowiedników numerycznych:

• Jeżeli dana czcionka korzysta już z 9 stopniowej skali numerycznej (np. OpenType), to skala CSS powinna pokrywać się z tą skalą.
• Jeżeli w rodzinie znajduje się zarówno czcionka typu Medium i typu Book, Regular, Roman lub Normal, to czcionce Medium zazwyczaj odpowiada wartość 500.
• Czcionce typu "Bold" często odpowiada wartość 700.
• Jeżeli czcionka operuje skalą mniejszą niż 9 stopniową i brakuje odpowiednika dla wartości 500, to wartość ta zostanie przypisana do tego samego słowa kluczowego co wartość 400. Jeżeli którakolwiek z wartości: 600, 700, 800 lub 900 pozostaje bez odpowiednika, to zostanie ona przypisana do tej samej czcionki co wartość o jeden stopień ciemniejsza lub jeżeli taka nie istnieje, to o jeden stopień jaśniejsza. Jeżeli któraś z wartości: 300, 200 lub 100 pozostaje bez odpowiednika, to zostanie ona przypisana do słowa kluczowego odpowiadającego czcionce o jeden stopień jaśniejszej lub jeżeli taka nie istnieje o jeden stopień ciemniejszej.

Powyższy proces ilustrują następujące przykłady. W przykładzie 1, dostępne są cztery grubości czcionki: Regular, Medium, Bold oraz Heavy. W przykładzie 2, natomiast dostępnych jest sześć wartości: Book, Medium, Bold, Heavy, Black oraz ExtraBlack. Warto zwrócić uwagę, że w drugim przykładzie wartości "ExtraBlack" nie został przypisany żaden odpowiednik.

Dostępne kroje        |  Przypisania  |  Brakujące wartości
----------------------+---------------+-------------------
"Example1 Regular"    |  400          |  100, 200, 300
"Example1 Medium"     |  500          |
"Example1 Bold"       |  700          |  600
"Example1 Heavy"      |  800          |  900
Dostępne kroje        |  Przypisania  |  Brakujące wartości
----------------------+---------------+-------------------
"Example2 Book"       |  400          |  100, 200, 300
"Example2 Medium"     |  500          |
"Example2 Bold"       |  700          |  600
"Example2 Heavy"      |  800          |
"Example2 Black"      |  900          |
"Example2 ExtraBlack" |  (brak)       |

Jako że zadaniem słów kluczowych bolder i lighter jest pogrubienie lub odchudzenie czcionki, a w danej rodzinie czcionek nie zawsze dostępne są kroje odpowiadające wszystkim wartościom, wartość bolder wybiera najbliższą dostępną grubszą czcionkę, a wartość lighter najbliższą chudszą. Słowa kluczowe bolder i lighter mają następujące znaczenie:

• Słowo kluczowe bolder wybiera następną wartość, która jest przypisana do czcionki ciemniejszej niż odziedziczona. Jeżeli nie ma takiej wartości, to wybierana jest następna wartość numeryczna, a wygląd czcionki pozostaje bez zmian. Wyjątkiem jest sytuacja, w której wartość odziedziczona wynosi 900. W tym przypadku wartość pozostaje bez zmian.
• W odwrotny sposób działa słowo kluczowe lighter, które wybiera następną wartość, która jest przypisana do czcionki jaśniejszej niż odziedziczona. Jeżeli nie ma takiej wartości, to wybierana jest następna "lżejsza" wartość numeryczna, a wygląd czcionki pozostaje bez zmian.

Nie ma gwarancji, że dla każdej wartości font-weight znajdzie się grubsza czcionka. Na przykład, niektóre kroje mogą występować tylko w dwóch wariantach: normal i bold, a inne, natomiast w ośmiu. Nie ma też pewności w jaki sposób aplikacja kliencka dokona dopasowania krojów czcionki do wartości własnościfont-weight. Pewne jest tylko to, że krój o danej wartości nie będzie jaśniejszy od czcionki o niższej wartości.

5.2.6 font-size

Wartości: <absolute-size> | <relative-size> | <length> | <percentage>
Wartość domyślna: medium
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: zależne od rozmiaru czcionki rodzica.

<absolute-size>

Słowo kluczowe <absolute-size> służy jako wskaźnik w tablicy zawierającej rozmiary czcionek obliczone i przechowywane przez klienta. Możliwe wartości to: [ xx-small | x-small | small | medium | large | x-large | xx-large ]. Sugerowany współczynnik skalowania pomiędzy sąsiadującymi wskaźnikami na ekranie monitora to 1.5. Jeżeli rozmiar czcionki medium wynosi 10pt, to rozmiar czcionki oznaczonej jako large wynosiłby 15pt. Wartość wskaźnika dla różnych nośników może się wahać. Ponadto, także sama aplikacja kliencka powinna brać pod uwagę takie czynniki jak jakość i dostępność czcionek, podczas wyliczania wartości tablicy. Dla każdej rodziny czcionek tablica może być inna.

<relative-size>

Słowo kluczowe <relative-size> jest interpretowane względem tablicy rozmiarów czcionek oraz rozmiaru czcionki zastosowanej dla elementu rodzica. Możliwe wartości to: [ larger | smaller ]. Jeżeli na przykład dla pewnego elementu zdefiniowano czcionkę o rozmiarze medium, a dla jego elementu potomka zdefiniowano wartość larger, to rozmiar czcionki elementu dziecka przyjmie wartość large. Jeżeli, natomiast brak w tablicy rozmiaru zdefiniowanego dla elementu, to aplikacja kliencka może wstawić wartości pośrednie lub je zaokrąglić. Wstawianie dodatkowych wartości może być konieczne w przypadku, gdy jest więcej wartości liczbowych niż słów kluczowych.

Przy zastosowaniu dwóch ostatnich wartości (<length> i <percentage>) do obliczania rozmiaru czcionki dla danego elementu, tablica rozmiarów czcionek nie powinna być brana pod uwagę.

Niedozwolone są wartości ujemne.

Jednostki em oraz ex użyte do określenia rozmiaru czcionki (własność font-size) odnoszą się do rozmiaru czcionki elementu rodzica. Natomiast użyte w wartościach innych własności, odnoszą się do elementu bieżącego.

Należy pamiętać, że aplikacja może dokonać reinterpretacji rozmiaru czcionki w zależności od kontekstu. Na przykład ze względu na zniekształcenia obrazu spowodowane zastosowaniem nietypowych metod prezentacji.

Przykłady:

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }

Przy zastosowaniu sugerowanego współczynnika skalowania 1.5 trzy ostatnie deklaracje są identyczne.

5.2.7 font

Wartości: [ <font-style> || <font-variant> || <font-weight> ] <font-size> [ / <line-height> ] <font-family>
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: dozwolone dla <font-size> oraz <line-height>

Własność font jest własnością zbiorczą służącą do definiowania wszystkich atrybutów czcionek (font-style, font-variant, font-weight, font-size, line-height oraz font-family) w jednym miejscu. Składnia tej własności została oparta o tradycyjną notację typograficzną definiowania własności czcionek.

Dokładny opis każdej własności znajduje się we wcześniejszej części tego rozdziału. Własnościom pominiętym we własności zbiorczej nadawana jest wartość domyślna.

P { font: 12pt/14pt 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 }

W drugiej z powyższych reguł wartość 80% odnosi się do rozmiaru czcionki elementu rodzica. W trzeciej, natomiast wartość procentowa odnosi się do elementu bieżącego.

W pierwszych trzech regułach nie określono wartości dla własności font-style, font-variant oraz font-weight. Oznacza to, że przyjmą one wartości domyślne. Czwarta zasada ustawia wartość bold dla własności font-weight, wartość italic dla własności font-style oraz wartość normal dla własności font-variant.

Piąta reguła określa następujące parametry: font-variant na small-caps, font-size na 120% czcionki elementu rodzica, line-height na 120% wielkości czcionki oraz font-family na fantasy. Wartość normal odnosi się do dwóch pozostałych własności: font-style i font-weight.

---

Niniejszy dokument jest tłumaczeniem rekomendacji W3C Cascading Style Sheets, level 1. Tłumaczenie to nie ma statusu dokumentu normatywnego i może zawierać błędy wynikające z tłumaczenia. Tylko dokument znajdujący się na stronie W3C pod adresem http://www.w3.org/TR/REC-CSS1 ma charakter normatywny.

Copyright © 2004 W3C^® (MIT, ERCIM, Keio), Wszystkie prawa zastrzeżone. W3C stosuje następujące zasady dotyczące odpowiedzialności cywilnej, znaku towarowego, używania dokumentu i licencji oprogramowania.