selektor { font-size: rozmiar }
UWAGA!
W Internet Explorerze 6 wielkość czcionki, podana przez powyższe wartości, zależy od zadeklarowanej wersji DTD.
W trybie Quirks wielkości są następujące (w przypadku ustawienia w menu przeglądarki średniego rozmiaru tekstu): xx-small = 10px (10 pikseli), x-small = 12px, small = 16px, medium = 18px, large = 24px, x-large = 32px, xx-large = 48px. Natomiast w trybie zgodności ze standardami: xx-small = 10px, x-small = 10px, small = 12px, medium = 16px, large = 18px, x-large = 24px, xx-large = 32px (w tym przypadku wszystkie wartości są o jeden rozmiar mniejsze niż w trybie Quirks).
W Internet Explorerze 5.0 wielkość czcionki nie zależy od DTD i wynosi zawsze tyle, co w przypadku trybu Quirks.
Z powyższych powodów bezpieczniej jest podawać wszystkie wielkości czcionek w pikselach (np.: 14px). Niestety wtedy uniemożliwiamy użytkownikowi zmianę rozmiaru tekstu, poprzez wybranie polecenia z menu: Widok|Rozmiar tekstu.
Przykład:
rozmiar xx-small
rozmiar x-small
rozmiar small
rozmiar medium
rozmiar large
rozmiar x-large
rozmiar xx-large
Czcionka bieżąca to taka, której wielkość została określona w arkuszu stylów (importowanym, zewnętrznym lub wewnętrznym) albo poprzez styl lokalny [zobacz: Wstawianie stylów]. Jeśli czcionka bieżąca nie została określona, przyjmuje domyślną wielkość 16px. Niestety działanie tego polecenia nie zawsze jest poprawne!
Przykład:
rozmiar smaller
czcionka bieżąca
rozmiar larger
Wartości pikselowe (np. 14px) pozwalają idealnie dopasować rozmiar tekstu do wyświetlania na ekranie monitora. Jednak chyba najbardziej intuicyjną jednostką dla rozmiaru czcionki są punkty (np. 9pt), ponieważ odpowiadają wielkości ustawianej w tradycyjnych edytorach tekstu oraz zapewniają odpowiednie dopasowanie na wydruku.
Przykład:
rozmiar 0.5cm
rozmiar 4mm
rozmiar 0.25in
rozmiar 10pt
rozmiar 1pc
rozmiar 15px
rozmiar 1em
rozmiar 2ex
Przykład:
rozmiar 75%
Czcionka bieżąca
rozmiar 150%
Jeśli definiowane własności mają odnosić się do całej strony (np. wielkość czcionki na całej stronie), można użyć selektora BODY albo HTML.
selektor { font-family: rodzaj, rodzaj1, rodzaj2,... }
Polecenie pozwala wybrać konkretny krój czcionki.
UWAGA! Należy być ostrożnym z używaniem tego polecenia, ponieważ jeśli użytkownik oglądający Twoją stronę, nie będzie posiadał podanej czcionki w swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną (w Internet Explorerze będzie to najprawdopodobniej 'Times New Roman', chociaż to też nie jest pewne).
Poza tym nie każda czcionka potrafi zapisać poprawnie polskie znaki (w standardzie ISO). Koniecznie sprawdź rezultat w praktyce!
Korzystniej jest wypisać kilka rodzajów - wtedy zostanie użyta taka czcionka, którą pierwszą w kolejności podawania będzie posiadał użytkownik.
W systemie Windows standardowo dostępne powinny być czcionki: 'Times New Roman' (szeryfowa), Arial (bezszeryfowa), 'Courier New' (monotypiczna). Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane są: Verdana, Tahoma, 'Trebuchet MS', Georgia. Przy definiowaniu czcionki, dobrze jest wykorzystywać te właśnie rodzaje, a także takie które domyślnie występują w innych systemach operacyjnych (np. Helvetica - podobna do Arial).
Oprócz podania rodzaju czcionki wprost, możliwe jest także wpisanie rodziny ogólnej:
body { font-family: Arial, Helvetica, Verdana, sans-serif }
Taki sposób jest mocno zalecany, gdyż wtedy nawet jeśli użytkownik nie będzie posiadał żadnej z podanych czcionek, strona zostanie wyświetlona przy użyciu czcionki podobnej do zdefiniowanych, a nie domyślnej, która może zupełnie nie pasować do typografii naszej strony. Dlatego zawsze startaj się na końcu wpisywać rodzinę ogólną, do której należą czcionki, podane w pierwszej kolejności (najczęściej wykorzystuje się rodziny: serif lub sans-serif).
Niestety, ponieważ w takim przypadku to przeglądarka automatycznie dobiera rodzaj czcionki, może się zdarzyć, że wybierze czcionkę, która niepoprawnie zapisuje polskie znaki (tak się właśnie stało w mojej przeglądarce z rodziną fantasy). Chociaż jeśli chodzi o rodziny podstawowe (serif, sans-serif, monospace), wszystko powinno być w porządku.
Przykład:
To jest czcionka Arial
To jest czcionka 'Courier New'
To jest czcionka 'Times New Roman'
To jest czcionka Verdana
To jest rodzina ogólna serif
To jest rodzina ogólna sans-serif
To jest rodzina ogólna monospace
To jest rodzina ogólna cursive
To jest rodzina ogólna fantasy
Na koniec ostatnia (najbardziej zaawansowana) możliwość ustalania kroju czcionki - czcionki osadzone. Jak czytelnik zapewne zauważył, ustalenie rodzaju czcionki, wcale nie jest takie proste. O czcionce przy użyciu której zostanie wyświetlona nasza strona WWW, decyduje zestaw "fontów" zainstalowanych przez użytkownika (w jego systemie operacyjnym). Praktycznie nie można przewidzieć rezultatu, gdyż na dobrą sprawę nie wiemy, jaki system posiada internauta odwiedzający nasz serwis. Używanie podstawowych rodzajów czcionek ('Times New Roman', Arial, 'Courier New', Helvetica), nie zawsze musi nam odpowiadać, a poza tym nie gwarantuje oczekiwanego rezultatu w stu procentach.
Okazuje się jednak, że istnieje sposób, pozwalający używać na stronie WWW dowolne czcionki, bez obawy o niepoprawne wyświetlanie. Możliwe jest umieszczenie na serwerze specjalnego pliku z czcionkami, z którego korzysta przeglądarka, podczas wyświetlania strony. Nawet jeśli użytkownik nie będzie posiadał wymaganego kroju, zostanie on automatycznie pobrany z Internetu i dynamicznie tymczasowo zainstalowany w jego systemie. Użytkownik nie będzie mógł z takiej czcionki korzystać po wyjściu z serwisu - chroni to prawa autorskie producentów czcionek.
Jednak nie wystarczy umieścić na serwerze zwykłej czcionki (np.: *.ttf), aby już móc z niej korzystać. Konieczne jest zbudowanie specjalnego pliku, wykorzystując w tym celu odpowiedni program. Istnieją dwie podstawowe technologie czcionek osadzonych:
Plik *.pfr można stworzyć np. za pomocą programu Corel Draw 8.0 lub 9.0 oraz Extensis BeyondPress (rozszerzenie QuarkXPress). Natomiast do zbudowania pliku *.eot, potrzebny jest darmowy program WEFT. Następnie osadzanie czcionki bezpośrednio na stronie, odbywa się w arkuszu stylów (wewnętrznym lub zewnętrznym):
<html>
<head>
<style type="text/css">
/* <![CDATA[ */
@font-face { font-family: comic; src: url(http://adres/plik.eot) }
body { font-family: comic }
/* ]]> */
</style>
</head>
<body>
Ten tekst jest napisany czcionką osadzoną "comic".
<p style="font-family: comic">Ten akapit używa czcionki osadzonej "comic".</p>
</body>
</html>
Pomyślisz zapewne: "Koniec kłopotów z czcionkami!". Niestety po raz kolejny okazuje się, że rzeczywistość nie jest taka różowa:
Więcej na temat czcionek osadzonych oraz programu WEFT (łącznie z opisem procesu osadzania) dowiesz się w Poradniku webmastera.
selektor { font-style: styl }
Polecenie pozwala nadać czcionce określony styl. Może to być: czcionka zwyczajna, pochylona lub pochylona drugiego rodzaju. Dwie ostatnie są wyświetlane bardzo podobnie. Różnica między nimi polega na tym, że czcionka italic faktycznie jest osobnym krojem, natomiast oblique może zostać wygenerowana przez pochylenie zwykłej czcionki.
Przykład:
styl normal
styl italic
styl oblique
selektor { font-weight: waga }
Niektóre rodziny czcionek mogą nie posiadać wszystkich dziewięciu stopni wytłuszczenia. Wiele posiada tylko wartości "normal" i "bold".
Przykład:
waga normal (400)
waga bold (700)
waga 100
waga 200
waga 300
waga 400 (normal)
waga 500
waga 600
waga 700 (bold)
waga 800
waga 900
Przykład:
waga lighter w stosunku do wartości "200"
waga lighter dla znacznika <B>...</B>
waga bolder w stosunku do wartości "800"
waga bolder dla znacznika <B>...</B>
selektor { font-variant: wariant }
Polecenie pozwala wybrać wariant czcionki jako "kapitaliki", czyli tekst napisany wielkimi literami, lecz czcionką o wielkości małych liter.
Przykład:
Wariant normal
Wariant small-caps
selektor { font: wartości atrybutów }
Zmiana kolejności może (ale nie musi) spowodować, że atrybut taki nie zostanie uznany. Ponadto przed wartością atrybutu line-height (odstęp między wierszami) należy obowiązkowo postawić ukośnik.
Polecenie to pozwala w wygodny sposób zdefiniować wszystkie atrybuty dotyczące czcionek. Już nie musimy wypisywać kolejno wszystkich cech, a jedynie ich konkretne wartości. Wartością może być np.: italic (font-style), 12pt (font-size) czy 'Times New Roman' (font-family). Wszystkie wartości należy wpisywać w określonej kolejności (przy czym można niektóre pominąć), a także oddzielić je od siebie spacjami. Dodatkowo przed line-height (odstęp między wierszami) należy obowiązkowo postawić ukośnik (ponieważ atrybuty font-size oraz line-height mogą mieć takie same wartości, a więc musimy je jakoś odróżnić).
Przykład:
Po wpisaniu:<p style="font: italic small-caps bold 12pt /1cm 'Times New Roman',Verdana,'MS Sans Serif'"> To jest paragraf napisany pismem pochyłym, z małymi kapitałkami, pogrubiony, o wielkości czcionki 12 punktów, odstępach między wierszami 1 centymetr oraz rodzinie czcionek 'Times New Roman', Verdana lub 'MS Sans Serif'. </p>otrzymamy na ekranie:
To jest paragraf napisany pismem pochyłym, z małymi kapitałkami, pogrubiony, o wielkości czcionki 12 punktów, odstępach między wierszami 1 centymetr oraz rodzinie czcionek 'Times New Roman', Verdana lub 'MS Sans Serif'.
Zauważ, że w definicji wpisujemy same wartości atrybutów (bez kolejnych cech), a dodatkowo przed odstępem między wierszami należy postawić ukośnik.Jako "wartości atrybutów" własności font można podać:
Przykład:
font: caption
font: icon
font: menu
font: message-box
font: small-caption
font: status-bar
(nieinterpretowane)
selektor { font-stretch: rozciąg }
Polecenie pozwala ustalić poziome rozciągnięcie czcionki na ekranie. Tekst rozciągnięty będzie zajmował więcej miejsca w linii, natomiast ściśnięty - mniej.
UWAGA! Polecenie wchodzi w skład CSS 2.0, ale nie CSS 2.1
Przykład:
rozciągnięcie ultra-condensed
rozciągnięcie extra-condensed
rozciągnięcie condensed
rozciągnięcie semi-condensed
rozciągnięcie normal
rozciągnięcie semi-expanded
rozciągnięcie expanded
rozciągnięcie extra-expanded
rozciągnięcie ultra-expanded
Niestety przeglądarki nie interpretują tego polecenia, więc prawdopodobnie nie zauważysz żadnego efektu.
(interpretuje Netsacape 7)
selektor { font-size-adjust: proporcje }
Subiektywny odbiór wielkości czcionki - a przez to jej czytelność - zależy bardziej od wysokości małej litery (1ex) niż od wysokości całej czcionki (1em). Dzieje się tak dlatego, ponieważ pomimo określenia takiego samego rozmiaru, różne czcionki posiadają różne proporcje, czyli stosunek wysokości małej litery do wysokości całej czcionki (1ex/1em). Oto proporcje wybranych czcionek:
Czcionki o większych proporcjach, są bardziej czytelne już przy mniejszej wysokości całkowitej.
Przykładowo wyrażenia: 'Times New Roman' oraz Verdana, zostały napisane różnymi czcionkami, ale o tej samej wielkości. Mimo to, pierwsze z nich (napisane czcionką 'Times New Roman') wydaje się wyraźnie mniejsze (jeżeli posiadasz oba rodzaje czcionek).
Przy deklarowaniu rodzaju czcionki zawsze istnieje niebezpieczeństwo, że użytkownik nie będzie posiadał zdefiniowanych przez Ciebie czcionek. Wtedy cały tekst na ekranie zostanie napisany czcionką domyślną. Może się jednak zdarzyć tak, że przy podanym rozmiarze, czcionka domyślna będzie dużo mniej czytelna lub zbyt "wysoka" i przez to strona straci estetykę. Powodem są właśnie znacznie różniące się proporcje. Aby zabezpieczyć się na taki wypadek, należy określić proporcje czcionki, za pomocą powyższego polecenia. Dzięki temu, niezależnie od rodzaju czcionki, tekst będzie tak samo czytelny, ponieważ przeglądarka automatycznie dobierze odpowiednią jej wielkość - zgodnie ze wzorem:
w' = w * (p / p')
<p style="font-family: Verdana, 'Times New Roman'; font-size: 14px; font-size-adjust: 0.58">jakiś tekst...</p>a jedyną dostępną czcionką byłby 'Times New Roman', to jego wielkość zostałaby podniesiona z 14px do 14px*(0.58/0.46) = 17.65px ('Times New Roman' ma proporcje 0.46) i dzięki temu, tekst będzie tak samo czytelny.
UWAGA! Polecenie wchodzi w skład CSS 2.0, ale nie CSS 2.1
Przykład:
Czcionka 'Times New Roman' - proporcje 0.58
Podstawowa czcionka 'Times New Roman' (domyślnie o proporcjach 0.46)
Czcionka Verdana (domyślnie o proporcjach 0.58)
Jeśli używasz przeglądarki internetowej innej niż Netscape 7, prawdopodobnie nie zobaczysz żadnego efektu.