Ogólne rodziny czcionek w CSS

Projektowanie typograficzne odgrywa ważną rolę w projektowaniu stron internetowych. Dobrze rozplanowana i sformatowana treść tekstowa pomaga witrynie osiągać większe sukcesy, tworząc przyjemne i łatwe w obsłudze czytanie. Częścią twoich wysiłków w pracy z czcionką będzie wybór odpowiednich czcionek do swojego projektu, a następnie użycie CSS, aby dodać te czcionki i style czcionek do wyświetlania strony. Odbywa się to za pomocą tak zwanej a stos czcionek.

Stosy czcionek

Kiedy ty określ czcionkę do użycia na stronie internetowej, najlepiej jest uwzględnić również opcje awaryjne na wypadek, gdyby nie można znaleźć wybranej czcionki. Te opcje awaryjne są przedstawione w stos czcionek. Jeśli przeglądarka nie może znaleźć pierwszej czcionki ze stosu, przechodzi do następnej. Kontynuuje ten proces, dopóki nie znajdzie czcionki, której może użyć, lub zabraknie jej opcji (w takim przypadku po prostu wybiera dowolną czcionkę systemową, którą chce). Oto przykład tego, jak stos czcionek wyglądałby w CSS po zastosowaniu do elementu „body”:

instagram viewer
ciało {
rodzina czcionek: Georgia, „Times New Roman”, szeryfowa;
}

Czcionka Georgia pojawia się jako pierwsza, więc domyślnie tego użyje strona, ale jeśli ta czcionka nie jest dostępna z jakiegoś powodu, strona powraca do Times New Roman.

Ująć Czcionka Times New Roman w podwójnych cudzysłowach, ponieważ jest to nazwa składająca się z wielu słów. Jednowyrazowe nazwy czcionek, takie jak Georgia czy Arial, nie wymagają cudzysłowów, ale wielowyrazowa nazwa czcionki z osadzonymi spacjami wymaga ich, aby przeglądarka wiedziała, że ​​wszystkie te słowa składają się na nazwę czcionki.

Stos czcionek kończy się słowem szeryfowy. To jest ogólna nazwa rodziny czcionek. W mało prawdopodobnym przypadku, gdy dana osoba nie ma Gruzji lub Czcionka Times New Roman na ich komputerze witryna użyłaby dowolnej czcionki szeryfowej, jaką mogłaby znaleźć. Przeglądarka wybierze dla Ciebie czcionkę, ale przynajmniej zaoferujesz wskazówki, aby wiedziała, jaki rodzaj czcionki najlepiej sprawdzi się w projekcie.

Ogólne rodziny czcionek

Ogólne nazwy czcionek dostępne w CSS to:

  • kursywny
  • Fantazja
  • monoprzestrzeń
  • szeryfowy
  • bezszeryfowy

Chociaż istnieje wiele innych klasyfikacji czcionek dostępnych w projektowaniu stron internetowych i typografii, w tym slab-serif, blackletter, display, grunge i więcej, te pięć ogólnych nazw czcionek to te, których można użyć w stosie czcionek w CSS.

  • Czcionki kursywą — często zawierają cienkie, ozdobne litery, które mają na celu naśladowanie fantazyjnego tekstu pisanego odręcznie. Czcionki te, ze względu na cienkie, kwieciste litery, nie nadają się do dużych bloków treści, takich jak kopia treści. Czcionki kursywy są zwykle używane do nagłówków i krótkich tekstów, które mogą być wyświetlane w większych rozmiarach.
  • Czcionki fantasy — to nieco szalone czcionki, które tak naprawdę nie należą do żadnej innej kategorii. Czcionki, które replikują dobrze znane logo, takie jak litery z Harry Potter lub Powrót do przyszłości filmy należą do tej kategorii. Czcionki te nie są odpowiednie dla treści treści, ponieważ często są tak stylizowane, że czytanie dłuższych fragmentów tekstu napisanego tymi czcionkami jest zbyt trudne.
  • Czcionki o stałej szerokości — mają takie same rozmiary i rozstawione litery, jakie można znaleźć na starej maszynie do pisania. W przeciwieństwie do innych czcionek, które mają zmienną szerokość liter w zależności od ich rozmiaru (na przykład wielka W zajmuje znacznie więcej miejsca niż małe litery ja), czcionki o stałej szerokości mają stałą szerokość dla wszystkich znaków. Czcionki te są często używane do odczytywania kodu, ponieważ wyraźnie różnią się od innych tekstów na tej stronie.
  • Czcionki szeryfowe — używaj trochę dodatkowych ligatur na formularzach listowych. Te dodatkowe elementy nazywają się szeryfy. Popularnymi czcionkami szeryfowymi są Georgia i Times New Roman. Czcionki szeryfowe świetnie sprawdzają się w przypadku dużego tekstu, takiego jak nagłówek, a także długich fragmentów tekstu i treści.
  • Bezszeryfowyczcionki — nie mają podwiązek. Nazwa oznacza bez szeryfów. Popularne czcionki w tej kategorii to Arial lub Helvetica. Podobnie jak szeryfy, czcionki bezszeryfowe sprawdzają się równie dobrze w nagłówkach, jak i treści, chociaż niektóre eksperci wolą, aby duże bloki tekstu unikały czcionek bezszeryfowych, ponieważ są one trudniejsze do odczytania w małym punkcie rozmiary.
instagram story viewer