Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.
W przypadku czcionek rozróżniamy kilka bloków informacji.
Uprzedzając opis sposobów wprowadzania stylów do dokumentu, założymy w tym miejscu, że posługujemy się stylami lokalnymi (in-line) tworzonymi za pomocą konstrukcji:
<p style="definicja stylu">Treść akapitu</p>
Do dyspozycji mamy aż 13 rozmaitych "wag" czcionki, różniących się stopniem pogrubienia (nawet trudno je będzie niekiedy rozróżnić na ekranie): normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Pokażmy to na przykładach:
<p style="font-weight: waga">Treść akapitu wyświetlana za pomocą wybranej wagi</p>
Treść akapitu wyświetlana za pomocą wagi normal
Treść akapitu wyświetlana za pomocą wagi bold
Treść akapitu wyświetlana za pomocą wagi bolder
Treść akapitu wyświetlana za pomocą wagi lighter
Treść akapitu wyświetlana za pomocą wagi 100
Treść akapitu wyświetlana za pomocą wagi 200
Treść akapitu wyświetlana za pomocą wagi 300
Treść akapitu wyświetlana za pomocą wagi 400
Treść akapitu wyświetlana za pomocą wagi 500
Treść akapitu wyświetlana za pomocą wagi 600
Treść akapitu wyświetlana za pomocą wagi 700
Treść akapitu wyświetlana za pomocą wagi 800
Treść akapitu wyświetlana za pomocą wagi 900
Wielkość czcionki możemy regulować za pomocą czterech metod: imiennych wielkości absolutnych, wielkości relatywnych, wysokości w jednostkach miary i wysokości w procentach.
Imienne wielkości absolutne
xx-small, x-small, small, medium, large, x-large, xx-large
<p style="font-size: wielkość absolutna">Treść akapitu</p>
Treść akapitu wyświetlana za pomocą wielkości xx-small
Treść akapitu wyświetlana za pomocą wielkości x-small
Treść akapitu wyświetlana za pomocą wielkości small
Treść akapitu wyświetlana za pomocą wielkości medium
Treść akapitu wyświetlana za pomocą wielkości large
Treść akapitu wyświetlana za pomocą wielkości x-large
Treść akapitu wyświetlana za pomocą wielkości xx-large
Wielkości relatywne
larger, smaller (w stosunku do domyślnej)
<p style="font-size: wielkość relatywna">Treść akapitu</p>
Treść akapitu wyświetlana za pomocą wielkości larger
Treść akapitu wyświetlana za pomocą wielkości smaller
Wielkość w jednostkach miary
W dokumencie można użyć kilku klasycznych jednostek miary: centymetry (cm), cale (in), milimetry (mm), punkty (pt) i pica (pc).
1in = 2.54cm
1pt=1/72in
1pc=12pt
Na przykład:
<p style="font-size: 1cm"<>/p>
Treść akapitu wyświetlana za pomocą wielkości 1 cm
Treść akapitu wyświetlana za pomocą wielkości 8 mm
Treść akapitu wyświetlana za pomocą wielkości 0,1 cala
Treść akapitu wyświetlana za pomocą wielkości 14 punktów
Treść akapitu wyświetlana za pomocą wielkości 1,5 pica
Wielkość w procentach
Podanie wielkości w procentach powinno dać w efekcie procent wielkości domyślnej dla danego selektora, np. akapitu, tytułu itp.
Obie przeglądarki interpretują to polecenie częściowo błędnie, np. w odniesieniu do tytułu.
Na przykład:
<h1 style="font-size: 125%">To jest tytuł stopnia pierwszego 125%</h1>
Możliwe jest użycie mieszanej definicji czcionki, obejmującej różne atrybuty, np. rodziny czcionek, wagi, wielkości itp. Nie jest konieczne podawanie cech - wystarczą same wartości po początkowej deklaracji font:.
<h3 style="font: italic bold 20pt Arial, Helvetica, sans-serif"></h3>
<p style="font: small-caps bold 14pt/18pt Times, 'Times New Roman', serif"></p>
Akapit małe kapitaliki, pogrubiony, 14 pkt, 18 pkt odstępu między liniami bazowymi wierszy, Times...
Należy zwracać uwagę na kolejność atrybutów. Poprawna kolejność to:
font-style font-variant font-weight font-size line-height font-family
Zmiana kolejności MOŻE spowodować wypadnięcie atrybutu, który nie został umieszczony we właściwym porządku.
Czcionki mogą mieć rozmaitą szerokość - specyfikacja stylów przewiduje tutaj następujące wartości od najbardziej zwężonych do najbardziej rozszerzonych:
ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded
Przykład definicji:
<p style="font-stretch: ultra-condensed">To jest akapit ultra-condensed</p>
Żadna przeglądarka nie obsługuje tych wartości.
To jest akapit ultra-condensed
To jest akapit extra-condensed
To jest akapit condensed
To jest akapit semi-condensed
To jest akapit normal
To jest akapit semi-expanded
To jest akapit expanded
To jest akapit extra-expanded
To jest akapit ultra-expanded
Niekiedy się zdarza, że zadeklarowana przez autora czcionka nie jest obecna w systemie czytelnika strony. U tego drugiego przeglądarka usiłuje zastąpić nieobecną czcionkę jakąś inną (lub sami ją podajemy jako alternatywę). Rozmaite czcionki mają odmienny stosunek wysokości małej litery do wysokości całej czcionki, np. w czcionce Verdana wynosi on 0,58, gdy w Times tylko 0,46. Dlatego właśnie Verdana o tej samej wysokości co Times wydaje się większa, co jest pozorem, ale na pewno jest czytelniejsza.
Gdyby autor zechciał utrzymać tę czytelną proporcję, mógłby ją zadeklarować w stylu, za pomocą polecenia:
<p style="font-size-adjust: 0.58">To jest jakiś akapit</p>
To jest jakiś akapit
Wtedy, gdy czytelnik nie dysponuje Verdaną, ale ma Times, przeglądarka przyjmie zapewne Times i podwyższy stopień pisma, aby zachować właśnie nie wysokość, ale jego czytelność. Times zostałby zwiększony np. z 12 punktów do 12*(0.58/0.46) czyli do ok. 15 pkt.
Przeglądarki nie akceptują na razie tego polecenia.
Niektóre wartości: Verdana 0,58, Comic Sans MS 0,54, Trebuchet MS 0,53, Georgia 0,50, Minion Web 0,47, Flemish Script 0,28.
Zauważmy, że na pierwszych pozycjach znajdują się czcionki stosunkowo niedawno wprowadzone do obiegu, właśnie z myślą o czytelności stron WWW.