Ostatnio edytowany:

font-family

Autor: Virtual Patriot

Opis właściwości font-family

Za pomocą właściwości font-family możemy określić rodzaj czcionki tekstu interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości font-family

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • tak
wartość initial
  • taka jak w ustawieniach przeglądarki internetowej
wyjątki initial
animowanie
  • nie

Interpretacja właściwości font-family

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis wartości właściwości font-family

wzorzec wartości

Opis

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 (na przykład 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 od poprzedniej nazwy rodzaju czcionki należy oddzielić 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

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:#AFF;
      }
    </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>