Za pomocą właściwości font-family oraz z góry zdefiniowanego wzorca wartości możemy określić rodzaj czcionki tekstu interesującego nas elementu HTML.
Składniki wzorca wartości właściwości font-family
Ważne
pierwsza napotkana w naszym zapisie nazwa rodzaju czcionki, która jest dostępna dla danego systemu operacyjnego (np. Windows, Linux, Android itp.), zostanie wykorzystana przez przeglądarkę internetową do określenia rodzaju czcionki tekstu elementu HTML
Przykładowe zapisy
Courier
Courier, 'Courier New'
Courier, 'Courier New', monospace
monospace
name
Składnik name nie jest wymaganym składnikiem wzorca wartości właściwości font-family. Składnik name określa nazwę rodzaju czcionki, którą chcemy, aby posiadał tekst interesującego nas elementu HTML.
Sposób podawania
należy podać przynajmniej jedną wybraną nazwę rodzaju czcionki. Gdy chcemy podać więcej nazw rodzajów czcionek, wtedy każdą kolejną nazwę rodzaju czcionki należy oddzielić od poprzedniej nazwy rodzaju czcionki dokładnie jednym znakiem przecinka. Ponadto, gdy nazwa rodzaju czcionki zawiera w sobie jakikolwiek biały znak, wtedy taką nazwę rodzaju czcionki należy umieścić w cudzysłowie pojedynczym lub podwójnym.
Wartość domyślna
brak
generic
Składnik generic nie jest wymaganym składnikiem wzorca wartości właściwości font-family. Składnik generic określa nazwę rodzaju ogólnego czcionki, którą powinien posiadać tekst interesującego nas elementu HTML w przypadku, gdy żadna podana przez nas nazwa rodzaju czcionki (składnik name) nie będzie dostępna dla systemu operacyjnego, w którym zostanie wyświetlony dany dokument HTML.
Wartość domyślna
brak
Dostępne rodzaje ogólne czcionki
serif
Rodzaj ogólny serif wskazuje na czcionkę, której znaki posiadają dodatkowe zakończenia. Przykładowymi czcionkami należącymi do rodzaju ogólnego serif są: 'Times New Roman', Georgia.
sans-serif
Rodzaj ogólny sans-serif wskazuje na czcionkę, której znaki nie posiadają dodatkowych zakończeń. Przykładowymi czcionkami należącymi do rodzaju ogólnego sans-serif są: Arial, Verdana, Helvetica, Tahoma.
cursive
Rodzaj ogólny cursive wskazuje na czcionkę pisaną kursywą. Przykładową czcionką należącą do rodzaju ogólnego cursive jest czcionka 'Comic Sans MS'.
fantasy
Rodzaj ogólny fantasy wskazuje na czcionkę dekoracyjną. Przykładową czcionką należącą do rodzaju ogólnego fantasy jest czcionka Cottonwood.
monospace
Rodzaj ogólny monospace wskazuje na czcionkę, której wszystkie znaki posiadają taki sam rozmiar szerokości. Przykładowymi czcionkami należącymi do rodzaju ogólnego monospace są: Courier, 'Courier New'.
Przykład
font-family:Courier, 'Courier New', monospace;
czcionka tekstu tego elementu "div" jest rodzaju "Courier", ponieważ do tego elementu "div" została dodana właściwość "font-family" wraz z następującymi wartościami: "Courier, 'Courier New', monospace"
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
font-family:Courier, 'Courier New', monospace;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
czcionka tekstu tego elementu "div" jest rodzaju "Courier", ponieważ do tego elementu "div" została dodana właściwość "font-family" wraz z następującymi wartościami: "Courier, 'Courier New', monospace"
</div>
</body>
</html>
