Własności czcionek

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>

Waga czcionki

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

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>

To jest tytuł stopnia pierwszego

To jest tytuł stopnia pierwszego 125%

Atrybuty mieszane

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>

Tytuł stopnia trzeciego, italic, bold, 20 pkt, Arial...

<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.

Poziome rozstrzelenie czcionek

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

Pionowe proporcje czcionek

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.