Czcionki CSS
Wybór odpowiedniej czcionki dla Twojej witryny jest ważny!
Wybór czcionki jest ważny
Wybór odpowiedniej czcionki ma ogromny wpływ na to, jak czytelnicy odbierają witrynę.
Odpowiednia czcionka może stworzyć silną tożsamość Twojej marki.
Ważne jest używanie czcionki, która jest łatwa do odczytania. Czcionka dodaje wartości Twojemu tekstowi. Ważne jest również, aby wybrać odpowiedni kolor i rozmiar tekstu dla czcionki.
Ogólne rodziny czcionek
W CSS istnieje pięć ogólnych rodzin czcionek:
- Czcionki szeryfowe mają małe pociągnięcia na krawędziach każdej litery. Tworzą poczucie formalności i elegancji.
- Czcionki bezszeryfowe mają czyste linie (bez dołączonych małych kresek). Tworzą nowoczesny i minimalistyczny wygląd.
- Czcionki o stałej szerokości — tutaj wszystkie litery mają tę samą stałą szerokość. Tworzą mechaniczny wygląd.
- Czcionki kursywą imitują pismo odręczne człowieka.
- Czcionki fantasy są czcionkami dekoracyjnymi/zabawnymi.
Wszystkie różne nazwy czcionek należą do jednej z ogólnych rodzin czcionek.
Różnica między czcionkami szeryfowymi i bezszeryfowymi
Uwaga: na ekranach komputerów czcionki bezszeryfowe są uważane za łatwiejsze do odczytania niż czcionki szeryfowe.
Niektóre przykłady czcionek
| Generic Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
Właściwość rodziny czcionek CSS
W CSS używamy tej font-familywłaściwości do określenia czcionki tekstu.
Uwaga : jeśli nazwa czcionki składa się z więcej niż jednego słowa, musi być w cudzysłowie, na przykład: „Times New Roman”.
Wskazówka: Właściwość font-familypowinna zawierać kilka nazw czcionek jako system „zastępczy”, aby zapewnić maksymalną zgodność między przeglądarkami/systemami operacyjnymi. Zacznij od wybranej czcionki, a zakończ na rodzinie ogólnej (aby przeglądarka mogła wybrać podobną czcionkę z rodziny ogólnej, jeśli nie są dostępne żadne inne czcionki). Nazwy czcionek należy oddzielić przecinkami. Przeczytaj więcej o czcionkach zastępczych w następnym rozdziale .
Przykład
Określ różne czcionki dla trzech akapitów:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}