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>
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, powinniśmy napisać
<p style="font-family: Times">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
Ponieważ nigdy nie wiemy, jakimi czcionkami dysponuje czytelnik strony, możemy się zabezpieczyć, podając kilka kolejnych czcionek, np:
<p style="font-family: Times, 'Times New Roman', 'Times New Roman CE'">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 jestem w stanie przewidzieć, jaka konkretna czcionka jest u Państwa angażowana do wyświetlania. Znam tylko jej nazwę rodzajową.
Oczywiście można mieszać definicje, podając nazwy imienne i rodzajowe, np. "Times, 'Times New Roman', serif".
Do dyspozycji mamy trzy style czcionki: normal, italic i oblique. Dwie ostatnie są wyświetlane w podobny sposób.
<p style="font-style: normal">Treść akapitu</p>
Treść akapitu wyświetlana w stylu normal
<p style="font-style: italic">Treść akapitu</p>
Treść akapitu wyświetlana w stylu italic
<p style="font-style: oblique">Treść akapitu</p>
Treść akapitu wyświetlana w stylu oblique (tylko IE)
Na razie rozróżniane są dwa warianty czcionek: normal i small-caps (małe kapitaliki). Przewiduje się wprowadzenie dalszych wariantów, np. condensed, expanded itd.
<p style="font-variant: normal">Treść akapitu</p>
Treść akapitu wyświetlana w wariancie normal
<p style="font-variant: small-caps">Treść akapitu</p>
Treść akapitu wyświetlana w wariancie small-caps (tylko IE)
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.