Zanim zaczniemy omawiać poszczególne własności czionek, ustalmy, że przykłady będą zapisywane za pomocą parametru style="tutaj_wpisz_style"... Wy sami możecie oczywiście w inny sposób to zapisywać. Sposoby zapisywania przedstawiłem w poprzednim numerze kursu.
Rodzina czcionek
Do zdefiniowania rodziny czcionek służy składnia: font-family: czcionka. Przykładowo, gdybyśmy chcieli, aby akapit był zapisany za pomocą czcionki Arial, piszemy
<P style="font-family:Arial">Arial</P>
Skutek będzie następujący:
Arial
Fixedsys
Ponieważ nigdy nie możemy być pewni, czy użytkownik ma akurat taką czcionkę zainstalowaną, jaką my zastosowaliśmy na stronie, możemy się "zabezpieczyć" (tylko bez skojarzeń mi tu! :)) podając kilka czcionek, oddzielonych przecinkiem i spacją:
<P style="font-family:Arial, Verdana, 'Times New Roman', Helvetica">Pierwsza dostępna czcionka z wymienionych</P>
Efekt:
Pierwsza dostępna czcionka z wymienionych
Tak jak pewnie zauważyliście, gdy nazwa czcionki ma więcej wyrazów, obejmujemy ją w apostrofy... Przy określaniu czcionki, możemy też się posłużyć nazwą rodzajową. Dostępne nazwy rodzajowe, to: serif, sans-serif, cursive, fantasy, monospace. Jak zawsze, przykładziki:
Pierwsza dostępna czcionka szeryfowa (serif)
Pierwsza dostępna czcionka bezszeryfowa (sans-serif)
Pierwsza dostępna czcionka pochyła (cursive)
Pierwsza dostępna czcionka ozdobna (fantasy)
Pierwsza dostępna czcionka monotypiczna
Styl czcionki
Do dyspozycji mamy trzy style czcionki: normal, italic i oblique. Dwie ostatnie są wyświetlane w podobny sposób. Do zapisu używamy składni: font-style: styl.
<P style="font-style:normal">Styl normal</P>
Styl normal
Styl italic
Styl oblique
Wariant czcionki
Rozróżniane są dwa warianty czcionki: normal i small-caps. Do zapisu używamy składni: font-variant: wariant.
<P style="font-variant:normal">Wariant normal</P>
Wariant normal
Wariant small-caps
Waga czcionki
Tutaj (w przeciwieństwie do poprzednich przykładów) mamy bardzo duże pole wyboru. Do dyspozycji mamy aż 13 różnych wartości. Są to: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Bardzo możliwe, że wasz monitor nie będzie w stanie rozróżnić tych wag :))). Do zapisu używamy składni font-weight: waga. Przykłady:
Waga normal
Waga bold
Waga bolder
Waga lighter
Waga 100
Waga 200
Waga 300
Waga 400
Waga 500
Waga 600
Waga 700
Waga 800
Waga 900
Wielkość czcionki
Wielkość czcionki można określać na cztery sposoby: za pomocą imiennych wielkości absolutnych, wielkości relatywnych, wysokości w jednostkach miary i wysokości w procentach... Ogólna składnia wygląda tak: font-size: wielkość.
Imienne wielkości absolutne
Są to: xx-small, x-small, small, medium, large, x-large, xx-large.
Wielkość xx-small
Wielkość x-small
Wielkość small
Wielkość medium
Wielkość large
Wielkość x-large
Wielkość xx-large
Wielkości relatywne
Są to: larger, smaller (w stosunku do domyślnej).
Wielkość larger
Wielkość smaller
Wielkość w jednostkach miary
W dokumencie można używać następujących jednostek miary: pc(pica), pt(punkt), in(cal), cm(centymetr), mm(milimetr). Zależności między tymi jednostkami wyglądają następująco:
Wielkość 2 pica
Wielkości procentowe
Podanie wartości procentowej oznacza procent wielkości czcionki domyślnej.
125% oryginalnej wielkości