| Nazwa deklaracji | Kod w head | Kod w body | Efekt formatowania |
|---|
| font-family:serif | .serif {font-family:serif} | <span class="serif"> Czcionka Times.</span> | Czcionka Times. |
| font-family:sans-serif | .sans-serif {font-family:sans-serif} | <span class="sans-serif"> Czcionka Arial.</span> | Czcionka Arial. |
| font-family:monospace | .monospace {font-family:monospace} | <span class="monospace"> Czcionka Curier.</span> | Czcionka Curier. |
| font-family:cursive | .cursive {font-family:cursive} | <span class="cursive"> Czcionka Sans.</span> | Czcionka Sans. |
| font-family:Verdena | .verdena {font-family:Verdena} | <span class="verdena"> Czcionka Verdena.</span> | Czcionka Verdena. |
| Nazwa deklaracji | Kod w head | Kod w body | Efekt formatowania |
|---|
| font-size:xx-large | .xx-large {font-size:xx-large} | <span class="xx-large"> xx-large.</span> | xx-large. |
| font-size:x-large | .x-large {font-size:x-large} | <span class="x-large"> x-large.</span> | x-large. |
| font-size:large | .large {font-size:large} | <span class="large"> large.</span> | large. |
| font-size:medium | .medium {font-size:medium} | <span class="medium"> medium.</span> | medium. |
| font-size:small | .small {font-size:small} | <span class="small"> small.</span> | small. |
| font-size:x-small | .x-small {font-size:x-small} | <span class="x-small"> x-small.</span> | x-small. |
| font-size:xx-small | .xx-small {font-size:xx-small} | <span class="xx-small"> xx-small.</span> | xx-small. |
| font-size:larger | .larger {font-size:larger} | <span class="larger"> larger.</span> | larger. |
| font-size:smaller | .smaller {font-size:smaller} | <span class="smaller"> smaller.</span> | smaller. |
| font-size:170% | .procent {font-size:170%} | <span class="procent"> 170%.</span> | 170%. |
| font-size:45pt | .punkty {font-size:45pt} | <span class="punkty"> 45pt.</span> | 45pt. |
| font-size-adjust:.5 | .adjust {font-size-adjust:.5} | <span class="adjust"> czytelność.</span> | czytelność. |
| Nazwa deklaracji | Kod w head | Kod w body | Efekt formatowania |
|---|
| font-style:normal | .normal {font-style:normal} | <span class="normal"> normal.</span> | normal. |
| font-style:italic | .italic {font-style:italic} | <span class="italic"> pochylenie (kursywa).</span> | pochylenie (kursywa). |
| font-style:oblique | .oblique {font-style:oblique} | <span class="oblique"> pochylenie.</span> | pochylenie. |
| font-variant:normal | .variant {font-variant:normal} | <span class="variant"> Tekst normalny.</span> | Tekst normalny. |
| font-style:small-caps | .small-caps {font-style:small-caps} | <span class="small-caps"> Kapitalizacja Tekstu.</span> | Kapitalizacja Tekstu. |
Można uprościć zapis reguły do prostszej postaci, ale należy przestrzegać kolejności umieszczania słów kluczowych. Zamiast deklaracji font-style, font-size, ... stosuje się właściwość font zgodnie z poniższą kolejnością:
Jeżeli chcemy na stronie umieścić czcionki, których nie ma w systemie to można je udostępnić przeglądarkom przez dynamiczne ładowanie czcionek.
Dotyczy to czcionek OpenType (*.eot} oraz TrueDoc (*.pfr) i czcionek *TrueType (.ttf).
Aby tego dokonać musimy wstawić w head (po poleceniu importu zewnętrznego pliku stylów) następujący kod:
@font-face {
font-family:nasza_dowolna_nazwa; src:url(http://fonty.pl/Fantazy.ttf);}
} - dla fontów z sieci,
lub
@font-face {
font-family:nasza_dowolna_nazwa; src:url(Fantazy.ttf);
} - dla fontów wgranych na naszą stronę.
W powyższym (drugim) przypadku fonty należy przekopiować na serwer do katalogu głównego. (Przy innym położeniu
należy uwzględnić ścieżkę dostępu).
Od tej pory fonty są dostępne i możemy je używać stosując dowolną metodę. Na przykład jak poniżej:
<p style="font-family:nasza_dowolna_nazwa">Nasz tekst</p>..