Właściwość font-family

Właściwość font-family ustawia rodzinę czcionki.

Składnia

cssselektor {
  font-family: nazwa czcionki;
}

Uwaga

Jeśli nazwa czcionki zawiera spacje, na przykład, Times New Roman, musi być ona ujęta w pojedynczy lub podwójny cudzysłów.

Uwaga

Można wymienić kilka podobnych czcionek po przecinku. Gdy przeglądarka napotka pierwszą czcionkę z listy, sprawdza jej obecność na komputerze użytkownika. Jeśli takiej czcionki nie ma, brana jest pod uwagę następna czcionka z listy i również analizowana jest pod kątem obecności. Dlatego podanie kilku czcionek zwiększa prawdopodobieństwo, że przynajmniej jedna z nich zostanie znaleziona na komputerze klienckim.

Listę zwykle kończy się słowem kluczowym, które opisuje rodzaj czcionki (wszystkie czcionki należą do jakiegoś typu) - serif, sans-serif, cursive, fantasy lub monospace. Jeśli przeglądarka nie znajdzie żadnej z podanych czcionek na komputerze użytkownika, to wybierze jedną z czcionek określonego typu.

Rodzaje czcionek

Rodzaj	Opis
`serif`	Czcionka szeryfowa.
`sans-serif`	Czcionka bezszeryfowa.
`cursive`	Czcionka kursywa.
`fantasy`	Czcionka dekoracyjna z pięknymi zawijasami i nietypowymi efektami.
`monospace`	Czcionka o stałej szerokości, w której szerokość każdego znaku jest taka sama.

Wartość domyślna: czcionka ustawiona w przeglądarce domyślnie. Zwykle jest to Times New Roman.

Przykład

Przypiszmy czcionce rodzinę Arial:

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-family: Arial;
}

Результат:

Przykład

Przypiszmy czcionce rodzinę Times New Roman. Ponieważ nazwa czcionki składa się z kilku słów, to umieszczamy ją w cudzysłowie:

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-family: "Times New Roman";
}

Результат:

Przykład

Przypiszmy czcionce czcionkę z grupy serif (najprawdopodobniej zostanie użyty Times New Roman):

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-family: serif;
}

Результат:

Przykład

Przypiszmy czcionce czcionkę z grupy sans-serif (najprawdopodobniej zostanie użyty Arial):

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-family: sans-serif;
}

Результат:

Przykład

Przypiszmy czcionce czcionkę z grupy fantasy (u Ciebie może nie zadziałać z powodu braku takiej czcionki):

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-family: fantasy;
}

Результат:

Przykład

Przypiszmy czcionce czcionkę z grupy monospace (litery staną się jednakowej szerokości):

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-family: monospace;
}

Результат: