font-family
Wybiera krój pisma, z listą zapasowych krojów na wypadek braku pierwszego.
- Wartość domyślna
zależna od przeglądarki- Dziedziczona
- Tak
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.fontFamily = "Georgia, serif"
Przykład
#body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
code {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}<p style="font-family: system-ui, sans-serif; margin: 0 0 8px">Tekst w kroju systemowym.</p>
<p style="margin: 0">Kod: <code style="font-family: ui-monospace, Menlo, monospace;">const points = 120</code></p>Definicja i zastosowanie
#Właściwość font-family przyjmuje listę krojów pisma oddzielonych przecinkami. Przeglądarka używa pierwszego dostępnego, więc lista działa jak plan awaryjny: jeśli użytkownik nie ma kroju Georgia, dostanie następny z listy.
Na końcu listy zawsze podawaj rodzinę ogólną: serif (szeryfowa), sans-serif (bezszeryfowa), monospace (o stałej szerokości znaków) albo system-ui (krój systemu operacyjnego). Nazwy krojów ze spacjami ujmij w cudzysłów.
Własne kroje, na przykład z Google Fonts, dołączasz regułą @font-face lub arkuszem dostawcy, a potem wpisujesz ich nazwę w font-family. Właściwość jest dziedziczona, dlatego zwykle ustawia się ją raz, na elemencie body.
Składnia
#font-family: <nazwa kroju> [, <nazwa kroju>]* , <rodzina ogólna>;Wartości
#- Krój bezszeryfowy, czytelny na ekranach.
- Krój szeryfowy, kojarzony z książkami i gazetami.
- Wszystkie znaki mają tę samą szerokość, jak w edytorze kodu.
- Konkretny krój z rodziną zapasową.
- Krój naśladujący pismo odręczne. Wygląd mocno zależy od systemu.
Wartości w praktyce
#sans-serif
.demo { font-family: sans-serif; }serif
.demo { font-family: serif; }monospace
.demo { font-family: monospace; }Georgia, serif
.demo { font-family: Georgia, serif; }cursive
.demo { font-family: cursive; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Zawsze kończ listę rodziną ogólną, na przykład
sans-serif. Bez niej przeglądarka może użyć kroju szeryfowego. - Każdy dodatkowy plik czcionki to dodatkowe pobieranie. Ogranicz liczbę krojów i grubości do tych, których naprawdę używasz.
Powiązane hasła
#- fontSkrót ustawiający styl, grubość, rozmiar, interlinię i krój czcionki naraz.
- font-sizeUstawia rozmiar czcionki.
- font-weightUstawia grubość czcionki, od cienkiej po bardzo pogrubioną.
- line-heightUstawia wysokość linii tekstu, czyli odstęp między wierszami.
- @font-faceRejestruje krój pisma pod wybraną nazwą, której potem używasz w font-family. Pozwala korzystać z fontów z plików własnej strony.
Widzisz błąd albo brakuje przykładu? Napisz do nas.