Własności czcionek





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.


Rodzina czcionek (font-family)
Styl czcionki (font-style)
Wariant czcionki (font-variant)
Waga czcionki (font-weight)
Wielkość czcionki (font-size)
Atrybuty mieszane (font)



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>

Rodzina czcionek


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:

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

Styl czcionki

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

Wariant czcionki

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

Waga czcionki

Do dyspozycji mamy aż 13 rozmaitych "wag" czcionki, różniących się stopniem pogrubienia (nawet trudno będzie je 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.
Internet Explorer błędnie przyjmuje domyślną czcionkę dokumentu jako selektor.

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.