Projekt typograficzny jest niezwykle ważnym elementem udanego projektu strony internetowej. Tworzenie witryn z tekstem, który jest czytelny i świetnie wygląda, to cel każdego profesjonalisty zajmującego się projektowaniem stron internetowych. Aby to osiągnąć, musisz mieć możliwość ustawienia określonych czcionek, których chcesz używać na swoich stronach internetowych. Aby określić krój lub rodzinę czcionek w swoich dokumentach internetowych, użyjesz właściwości stylu font-family style w swoim CSS.
Najbardziej nieskomplikowany styl rodziny czcionek, którego można użyć, zawierałby tylko jedną rodzinę czcionek:
p {
rodzina czcionek: Arial;
}
Jeśli zastosujesz ten styl do strony, wszystkie akapity będą wyświetlane w rodzinie czcionek „Arial”. To świetnie, a ponieważ „Arial” to tak zwana „czcionka bezpieczna w Internecie”, co oznacza większość (jeśli nie wszystkie) komputery miałyby to zainstalowane, możesz spać spokojnie, wiedząc, że Twoja strona będzie wyświetlana w zamierzonym czcionka.
Co się stanie, jeśli nie można znaleźć wybranej czcionki? Na przykład, jeśli na stronie nie używasz „czcionki bezpiecznej w Internecie”, co zrobi klient użytkownika, jeśli nie ma tej czcionki? Dokonują zamiany.
Może to skutkować zabawnie wyglądającymi stronami. Kiedyś wszedłem na stronę, na której mój komputer wyświetlał ją w całości w „Wingdings” (zestaw ikon), ponieważ mój komputer nie miał czcionka, którą określił programista, a moja przeglądarka dokonała fatalnego wyboru, jakiej czcionki użyje jako zastąpienie. Strona była dla mnie całkowicie nieczytelna! W tym miejscu do gry wchodzi stos czcionek.
Oddziel wiele rodzin czcionek przecinkiem w stosie czcionek
„Stos czcionek” to lista czcionek, których ma używać Twoja strona. Możesz ułożyć wybrane czcionki w kolejności swoich preferencji i oddzielić je przecinkami. Jeśli przeglądarka nie ma pierwszej rodziny czcionek na liście, spróbuje drugiej, a następnie trzeciej i tak dalej, aż znajdzie taką, którą ma w systemie.
rodzina czcionek: Pussycat, Algerian, Broadway;
W powyższym przykładzie przeglądarka najpierw wyszuka czcionkę „Pussycat”, następnie „Algerian”, a następnie „Broadway”, jeśli nie zostanie znaleziona żadna inna czcionka. Daje to większą szansę na użycie co najmniej jednej z wybranych czcionek. Nie jest idealny, dlatego mamy jeszcze więcej, które możemy dodać do naszego stosu czcionek (czytaj dalej!).
Użyj ogólnych czcionek na końcu
Możesz więc utworzyć stos czcionek z listą czcionek i nadal nie mieć żadnej, której przeglądarka nie może znaleźć. Nie chcesz, aby Twoja strona była nieczytelna, jeśli przeglądarka dokona złego wyboru zastępstwa. Na szczęście CSS też ma na to rozwiązanie i nazywa się ogólne czcionki.
Zawsze należy kończyć listę czcionek (nawet jeśli jest to lista jednej rodziny lub tylko czcionek bezpiecznych w Internecie) czcionką ogólną. Istnieje pięć, których możesz użyć:
- Kursywny
- Fantazja
- Monoprzestrzeń
- Bezszeryfowy
- Szeryf
Dwa powyższe przykłady można zmienić na:
rodzina czcionek: Arial, bezszeryfowa;
lub.
rodzina czcionek: Pussycat, Algerian, Broadway, fantasy;
Niektóre nazwy czcionek składają się z dwóch lub więcej słów
Jeśli rodzina czcionek, której chcesz użyć, składa się z więcej niż jednego słowa, należy ją otoczyć podwójnymi cudzysłowami. Chociaż niektóre przeglądarki potrafią czytać rodziny czcionek bez cudzysłowów, mogą wystąpić problemy, jeśli białe znaki są zagęszczone lub ignorowane.
rodzina czcionek: „Times New Roman”, szeryfowa;
W tym przykładzie widać, że nazwa czcionki „Times New Roman”, która jest wielowyrazowa, jest ujęta w cudzysłów. To informuje przeglądarkę, że wszystkie trzy z tych słów są częścią tej nazwy czcionki, w przeciwieństwie do trzech różnych czcionek o nazwach jednowyrazowych.