fontprop

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:

Analogicznie, możemy podać czcionkę 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>

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>

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):

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>

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

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

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>

<p style="font-variant: small-caps">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>

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>

Wielkości relatywne

larger, smaller (w stosunku do domyślnej)

<p style="font-size: wielkość relatywna">Treść akapitu</p>

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>

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>

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.

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>

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.