CSS Font

Wybór odpowiedniej czcionki dla Twojej strony jest bardzo ważny!

Wybór czcionki jest bardzo ważny

Wybór odpowiedniej czcionki ma ogromny wpływ na doświadczenie użytkownika strony.

Prawidłowa czcionka może stworzyć silny wizerunek marki.

Wybór łatwo czytelnego czcionki jest bardzo ważny. Czcionki dodają wartości Twojemu tekstowi. Wybór odpowiedniego koloru i rozmiaru tekstu jest również bardzo ważny.

Uniwersalne rodziny czcionek

W CSS istnieją pięć uniwersalnych serii czcionek:

  • Czcionki serif (Serif) - na krawędzi każdej litery znajduje się mały pędzel. Tworzą poczucie formy i elegancji.
  • Czcionki sans-serif (Sans-serif) - linie czcionki są proste (nie mają małych pędzelków). Tworzą nowoczesny i minimalistyczny wygląd.
  • Czcionki monospace (Monospace) - wszystkie litery mają stałą szerokość. Tworzą mechaniczny wygląd.
  • Czcionki cursive (Cursive) - naśladują pismo ludzkie.
  • Czcionki fantasy (Fantasy) - są dekoracyjne/śmieszne.

Wszystkie różne nazwy czcionek należą do jednej z pięciu uniwersalnych serii czcionek.

Różnica między czcionkami Serif i Sans-serif

Serif vs. Sans-serif

Wskazówka:Na ekranie komputerowym, czcionki bezszeryfowe są uważane za łatwiejsze do czytania niż czcionki szeryfowe.

Przykłady niektórych czcionek

Uniwersalne rodziny czcionek Przykłady nazw czcionek
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

Atrybut font-family w CSS

W CSS używamy atrybutu font-family do określania czcionki tekstu.

Atrybut font-family powinien zawierać wiele nazw czcionek jako „zapasowy” system, aby zapewnić maksymalną zgodność między przeglądarką/operacyjnym systemem. Zaczynaj od czcionki, której potrzebujesz, i kończ na uniwersalnych seriach (jeśli nie ma innych dostępnych czcionek, pozwól przeglądarce wybrać podobną czcionkę z uniwersalnych serii). Nazwy czcionek powinny być oddzielone przecinkami.

Uwaga:Jeśli nazwa czcionki składa się z więcej niż jednego słowa, musi być otoczona znakami cudzysłowymi, na przykład: "Times New Roman".

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;
}

Spróbuj sam