19. Właściwości czcionki w CSS

W tym rozdziale nadal korzystamy z przykładowej strony utworzonej w poprzednim rozdziale, więc możesz go traktować jako coś w rodzaju jego drugiej części.

Temat właściwości czcionki zaczniemy od wyjaśnienia pewnych kwestii terminologicznych, przez które w internecie, a może i w świecie realnym, stoczono niejeden ostry pojedynek słowny, a może i fizyczny…

Najwięcej emocji budzą dwa słowa: font i czcionka:

1. Czcionka (ang. font) – dawniej tym słowem określano pojedynczy metalowy lub drewniany prostopadłościan reprezentujący jedną literę i wykorzystywany do odbijania farby na papierze.

   Dziś słowa czcionka potocznie używa się do określania kroju pisma. Kiedy na przykład mówimy, że tekst jest napisany czcionką Verdana, to tak naprawdę mamy na myśli, że do napisania tego tekstu użyto kroju pisma o nazwie Verdana.

   Ponadto w języku angielskim słowo font oznacza także odmianę kroju pisma, która jest zapisana w postaci pliku fontu.

2. Font (ang. font file) – plik komputerowy zawierający informacje o wyglądzie i sposobie prezentacji wszystkich znaków należących do danej odmiany kroju pisma. Ten plik może mieć różne rozszerzenia, np. .otf lub .ttf. Font można porównać do szuflady z czcionkami należącymi do określonego kroju.
3. Krój pisma (ang. typeface) – kompletna reprezentacja zestawu znaków pisma i wszystkich związanych z nią cech, takich jak rozmiar i kształt szeryfów, szerokość znaków itd. To jest to, co widzimy, patrząc na tekst.

4. Rodzina fontów (ang. font family) – zbiór wszystkich odmian kroju pisma, które różnią się między sobą różnymi cechami, takimi jak grubość znaków, pochylenie itd. Na przykład rodzina fontów to Roboto, natomiast Roboto Medium 500 Italic to konkretna odmiana kroju pisma z tej rodziny fontów.

   Każda odmiana kroju pisma jest reprezentowana przez osobny plik fontu. Jeśli więc ustawimy określony krój pisma i wybierzemy jego odmianę pochyloną (kursywę), to przeglądarka wybierze plik fontu odpowiadający tej właśnie odmianie danego fontu.

   Na przykład w serwisie Google Fonts można znaleźć rodzinę fontów o nazwie Roboto. Jeśli pobierzemy ją w całości, to otrzymamy plik ZIP zawierający następujące pliki reprezentujące wszystkie odmiany tego kroju pisma:

   • Roboto-Black.ttf
   • Robot-BlackItalic.ttf
   • Roboto-Bold.ttf
   • Roboto-BoldItalic.ttf
   • Roboto-Italic.ttf
   • Roboto-Light.ttf
   • Roboto-LightItalic.ttf
   • Roboto-Medium.ttf
   • Roboto-MediumItalic.ttf
   • Roboto-Regular.ttf
   • Roboto-Thin.ttf
   • Roboto-ThinItalic.ttf

Krótko mówiąc, najpierw ktoś projektuje odmianę kroju pisma, a następnie zapisuje owoc swojej pracy w postaci fontu. Ewentualnie, jeśli będzie miał na to ochotę, może też zamówić sobie odlew czcionek na podstawie tego fontu.

W tym kursie w sytuacjach, w których nie ma to znaczenia, posługujemy się potocznym określeniem czcionka i terminem krój pisma jako synonimami, za co niejeden specjalista od druku najchętniej pewnie spaliłby nam serwer…

Znając prawidłową terminologię z zakresu czcionek, i wiedząc czym grozi jej ignorowanie, możemy przejść do zgłębiania ich dalszych właściwości.

Typy kroju pisma

W CSS wyróżnia się pięć rodzajów kroju pisma:

• Kroje szeryfowe (ang. serif) – takie, których znaki mają małe ozdoby (zwane właśnie szeryfami) na zakończeniach.
• Kroje bezszeryfowe (ang. sans-serif) – takie, których znaki nie mają szeryfów.
• Kroje o stałej szerokości znaków (ang. monospace) – takie, w których każdy znak zajmuje tyle samo miejsca w poziomie.
• Kroje pochyłe ręczne (ang. cursive) – kroje imitujące pismo odręczne.
• Kroje fantazyjne (ang. fantasy) – kroje dekoracyjne.

Poniższy rysunek przedstawia różnicę między wszystkimi wymienionymi typami kroju pisma.

Zasadniczo kroje szeryfowe uważane są za bardziej czytelne w druku tradycyjnym, a kroje bezszeryfowe – za bardziej czytelne w internecie.

Krój szeryfowy, krój bezszeryfowy itd. to nazwy typów kroju pisma. Na powyższej ilustracji została podana nazwa konkretnego kroju użytego w każdym przypadku. Za pomocą CSS możemy określić zarówno konkretny krój pisma, przez podanie nazwy fontu, jak i interesujący nas typ kroju pisma.

Rodziny czcionek, czyli własność font-family

Do określania krojów pisma w CSS służy własność font-family. Jako wartość przyjmuje ona listę nazw rodzin fontów rozdzielonych przecinkami, np.:

font-family: Verdana, Arial, "Trebuchet MS";

Jeśli nazwa rodziny fontów składa się z jednego słowa, to może być wpisana wprost, natomiast nazwy rodzin fontów składające się z dwóch i większej liczby słów należy wpisywać w cudzysłowie, jak w powyższym przykładzie w przypadku rodziny Trebuchet MS.

Po co wymieniać kilka rodzin fontów, kiedy chcemy określić krój pisma wybranego elementu? Jest to rodzaj zabezpieczenia. Użytkownicy będą przeglądać nasze strony na bardzo różnych urządzeniach i nie każde z nich musi mieć wszystkie fonty, których chcielibyśmy użyć.

Jeśli na przykład powyższą deklarację zastosujemy do elementu body, to znajdujący się w nim tekst będzie prezentowany krojem pisma Verdana, chyba że urządzenie, z którego korzysta użytkownik, nie będzie miało zainstalowanego tej rodziny fontów. Wówczas system spróbuje zastosować krój Arial, a jeśli jego też nie znajdzie, to poszuka Trebuchet MS.

Co się stanie, jeśli żadna z rodzin fontów na liście nie zostanie znaleziona? W takim przypadku zostanie zastosowany domyślny krój pisma w danym urządzeniu. Może to skutkować tym, że nasz tekst będzie wyglądał nieatrakcyjnie, przy wszystkich ustawieniach dostosowanych pod kątem innego typu fontu.

Aby wyeliminować ryzyko takiej kompletnej katastrofy, można zastosować dwie strategie. Po pierwsze na przedostatnim miejscu listy dobrze jest umieścić nazwę jednej z tzw. bezpiecznych rodzin fontów sieciowych, czyli rodzin, które są obecne w prawie wszystkich urządzeniach. Poniżej znajduje się ich lista:

• Helvetica (bezszeryfowa)
• Arial (bezszeryfowa)
• Arial Black (bezszeryfowa)
• Verdana (bezszeryfowa)
• Tahoma (bezszeryfowa)
• Trebuchet MS (bezszeryfowa)
• Impact (bezszeryfowa)
• Gill Sans (bezszeryfowa)
• Times New Roman (szeryfowa)
• Georgia (szeryfowa)
• Palatino (szeryfowa)
• Courier (szeryfowa)
• Lucida (szeryfowa)

Druga strategia polega na określeniu na końcu interesującego nas typu kroju pisma, dzięki czemu w ostateczności zostanie przynajmniej zastosowany taki typ kroju, jaki chcemy. W związku z tym nasz powyższy przykład moglibyśmy zmodyfikować w następujący sposób:

font-family: "Trebuchet MS", Verdana, Arial, sans-serif;

Wszystkie rodziny fontów wymienione w tej deklaracji są typu bezszeryfowego. Jeśli w urządzeniu użytkownika nie znajdzie się żadna z rodzin fontów wymienionych na liście, to w ostateczności zostanie zastosowany domyślny bezszeryfowy krój pisma, jakikolwiek on jest. Taka lista w CSS nazywa się stosem fontów (ang. font stack).

Poniżej znajduje się lista typów kroju pisma, których można używać na końcu deklaracji własności font-family:

• sans-serif
• serif
• monospace
• cursive
• fantasy

Innym rozwiązaniem problemu z nieobecnością fontów w systemie użytkownika jest dołączanie ich do strony w postaci pliku zewnętrznego.

Dołączanie fontów do stron

Jeśli chcesz mieć absolutną pewność, że tekst na Twojej stronie będzie wyglądał dokładnie tak, jak chcesz, to możesz do niej dołączyć potrzebne pliki fontów za pomocą elementu link.

W internecie istnieją serwisy z fontami, z których można bezpłatnie lub płatnie pobierać fonty i wykorzystywać je na swoich stronach. Do najpopularniejszych serwisów tego typu zaliczają się Google Fonts i Font Squirrel. Jeśli chodzi o pierwszy z wymienionych, to wszystkie dostępne w nim fonty są dostępne bezpłatnie i na licencji open source.

Zobaczymy, jak to działa.

Google Fonts

Jeśli chcesz na swojej stronie użyć fontu z serwisu Google Fonts, to wejdź na jego stronę pod adresem https://fonts.google.com/ i wybierz interesujący Cię krój pisma. Kroje pisma możesz przeglądać po kolei lub filtrować wg kategorii (Categories), języka (Language) i liczby stylów (Number of Styles). Spójrz na poniższy zrzut ekranu.

Powiedzmy, że spodobał nam się krój pisma Delicious Handrawn i chcielibyśmy użyć go na naszej stronie. Nic prostszego.

Aby dołączyć do swojej strony font z serwisu Google Fonts, należy wybrać interesujący nas krój, po czym dodać go do strony za pomocą elementu link o następującej strukturze:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=nazwa-wybranego-fontu">

W naszym przypadku będzie on wyglądał następująco:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Delicious+Handrawn">

To wszystko, teraz wystarczy odpowiednio zdefiniować deklarację font-family. Powiedzmy na przykład, że chcemy zastosować krój pisma Delicious Handrawn w akapitach na naszej stronie (tak naprawdę to zły pomysł, ale chodzi tylko o prezentację możliwości – zawsze możesz wybrać odpowiedniejszy do tego celu font).

Wklej powyższy element link w sekcji nagłówkowej swojego dokumentu o why the lucky stiffie, a poniższą deklarację na końcu arkusza stylów w tym dokumencie:

p {font-family: "Delicious Handrawn";}

Teraz akapity na naszej stronie wyglądają tak:

Ten font zdecydowanie nie nadaje się do tekstu akapitów, ale umiesz już dodawać fonty do swoich stron z serwisu Google Fonts, więc w każdej chwili możesz znaleźć i dodać coś bardziej odpowiedniego. Na razie wróć do poprzednich ustawień.

Ponadto font można dodać także w arkuszu stylów za pomocą specjalnej reguły o nazwie @font-face. Przyjrzymy się jej bliżej.

Reguła @font-face

Fonty można dodawać także do arkuszy stylów. Służy do tego reguła @font-face, w której należy podać nazwę fontu i adres do jego pliku. Nazwa fontu może być dowolna i określa się ją za pomocą konstrukcji o nazwie font-family, która w regule @font-face nie jest własnością, tylko tzw. deskryptorem:

@font-face {
  font-family: nasza_nazwa_fontu;
  src: url("adres_fontu");
}

Adres fontu może być względny, bezwzględny lub może być pełnym adresem URL, jeśli na przykład dołączamy font z jakiejś zewnętrznej usługi, typu Google Fonts.

Tym razem powiedzmy, że chcemy dołączyć font z własnego serwera. Pozostaniemy przy foncie Delicious Handrawn z serwisu Google Fonts. Aby umieścić go w folderach naszej witryny, musimy go pobrać na dysk swojego komputera.

W tym celu kliknij pole prezentujące ten font w serwisie Google Fonts, aby przejść do strony zawierającej jego szczegółowy opis, i na tej stronie kliknij przycisk Download family (Pobierz rodzinę), który znajduje się w pobliżu prawego górnego rogu okna.

Zostanie pobrany plik ZIP o nazwie Delicious_Handrawn.zip zawierający dwa pliki: DeliciousHandrawn-Regular.ttf i OFL.txt. Pierwszy to właśnie interesujący nas font, a drugi zawiera licencję.

Wypakuj te pliki po czym utwórz w katalogu głównym swojej witryny folder o nazwie fonts i skopiuj do niego plik DeliciousHandrawn-Regular.ttf.

Następnie w arkuszu stylów na swojej stronie dodaj regułę @font-face importującą ten plik do strony pod dowolną nazwą (aby nie robić zamieszania, użyjemy nazwy Delicious Handrawn, ale moglibyśmy użyć dowolnej).

@font-face {
  font-family: Delicious Handrawn;
  src: url("/fonts/DeliciousHandrawn-Regular.ttf");
}

Font jest już dołączony do naszej strony i możemy go normalnie używać pod nazwą Delicious Handrawn, np.:

p {font-family: "Delicious Handrawn"}

Fonty z ikonami

Oprócz „zwykłych” fontów istnieją też specjalne fonty zawierające ikony. Za ich pomocą można wstawiać na stronę efektowne ikony w taki sam sposób, w jaki wpisuje się tekst, tylko trzeba posługiwać się encjami.

Jednym z najlepszych i najpopularniejszych fontów tego typu jest Font Awesome. Jest on dostępny zarówno w wersji płatnej, jak i darmowej. Wersja płatna zawiera aż ponad 22 000 ikon, a darmowa – ponad 2000.

Jeśli chcesz użyć takiego fontu na swojej stronie, to masz już odpowiednią wiedzę, aby to zrobić. Musisz tylko przeczytać instrukcje dostępne na stronie projektu i się do nich zastosować. Zostawiamy to jako ćwiczenie do samodzielnego wykonania dla chętnych.

Skoro tak dużo mówimy o fontach, to na zakończenie tego rozdziału omówimy jeszcze zbiorczą własność CSS służącą do definiowania wszystkich właściwości pisma – nosi ona nazwę font.

Własność zbiorcza font

Własność zbiorcza font umożliwia zdefiniowanie pięciu własności określających właściwości pisma oraz blisko z nimi spokrewnionej własności line-height, której opis znajduje się we wcześniejszej części tego rozdziału. Oto te własności w takiej kolejności, w jakiej powinno się je definiować:

• font-style
• font-variant
• font-weight
• font-width
• font-size/line-height
• font-family

Własności font-size i font-family są obowiązkowe, tzn. musimy podać ich wartości. Pozostałe są opcjonalne. Jeśli je pominiemy, to zostaną im nadane wartości domyślne.

Poniżej znajduje się przykładowa deklaracja własności font ze zdefiniowanymi wszystkimi wartościami:

font: italic small-caps bold 16px/1.4 Verdana, sans-serif;

Ta deklaracja definiuje następujące ustawienia: pismo pochyłe (italic), kapitaliki (small-caps), pismo pogrubione (bold), rozmiar czcionki 16 pikseli (16px), wysokość wiersza 1,4 rozmiaru czcionki elementu (1.4), krój pisma Verdana lub domyślny krój bezszeryfowy, jeśli Verdana nie zostanie znaleziona (Verdana, sans-serif). Gdybyśmy zastosowali tę deklarację do akapitów na naszej stronie, to efekt byłby taki:

Na temat fontów, krojów pisma itp. można napisać całą książkę, ale tak szczegółowe wiadomości nie są potrzebne osobom tworzącym strony internetowe. Informacje zawarte w tym rozdziale w zupełności Ci wystarczą do stworzenia pięknie wyglądającego tekstu.

To jest przedostatni rozdział z części poświęconej semantyce tekstu. W następnym rozdziale zrobimy zwięzłe podsumowanie zdobytej wiedzy i poznamy pozostałe, rzadziej używane, elementy „tekstowe”, po czym całkowicie zmienimy perspektywę, tzn. zamiast poruszać się w obrębie akapitu, zajmiemy się ogólną strukturą strony, a więc tworzeniem nagłówka treści, menu, pasków bocznych, artykułów, stopki, tabel, list itd.

Podsumowanie

• Za używanie słowa czcionka czasami można dostać w głowę metalowym klockiem.
• Krój pisma może być szeryfowy, bezszeryfowy albo o stałej szerokości znaków. Ponadto istnieją też kroje dekoracyjne i imitujące pismo ręczne.
• Do stron można dołączać fonty, aby uniknąć problemu z ich dostępnością w urządzeniach użytkowników.
• Fonty można dołączać za pomocą elementu link w nagłówku dokumentu HTML oraz za pomocą reguły @font-face w arkuszu stylów.
• Istnieją także fonty zawierające same ikony, które ułatwiają dodawanie ozdób graficznych do stron.
• Własność zbiorcza font umożliwia zdefiniowanie ustawień sześciu własności CSS związanych z właściwościami pisma w jednej deklaracji.
• Własność font-style umożliwia zmianę stylu pisma na pochyłe.
• Własność font-variant umożliwia zamianę tekstu na kapitaliki.
• Własność font-weight służy do określania grubości pisma.
• Własność font-size określa rozmiar pisma.
• Własność line-height pozwala na zdefiniowanie wysokości wiersza tekstu.
• Własność font-family określa krój pisma.

Ćwiczenia

1. Znajdź w serwisie Google Fonts dwa dodatkowe fonty. Jeden taki, który będzie podnosił atrakcyjność wizualną elementów nagłówkowych (h1 itd.), a drugi – dla akapitów. Dołącz te fonty do swojej strony i zastosuj je do odpowiednich elementów.

Autor zdjęcia why the lucky stiffa: Roo Reynolds – Flickr, CC BY-SA 2.0.