Warsztat: Kolorowanie kodu

Pod adresem https://www.latofonts.com dostępna jest do pobrania czcionka Lato polskiego projektanta Łukasza Dziedzica. Jest to czcionka w wersji Web. Należy ją pobrać (Download Lato TTF font), rozpakować z archiwum, ale NIE instalować w systemie.

Przeanalizuj rozpakowane archiwum i znajdź odpowiedzi na pytania:

• w którym katalogu znajdują się pliki czcionek?

• w jakich formatach dostarczono pojedynczą czcionkę?

• w którym pliku CSS (#1) znajdują się reguły "konfigurujące" pojedynczą czcionkę?

• w którym pliku CSS (#2) znajduje się reguła wywołująca użycie pojedynczej czcionki dla wskazanego Selektora CSS?

• jaka jest ścieżka dostępowa do czcionki z poziomu pliku CSS (#1)?

Na poniższym listingu przedstawiono przykładowy kod CSS wymagany do zastosowania niestandardowej (nieobecnej w systemie operacyjnym klienta) czcionki na witrynie WWW (kolorem czerwonym oznaczono elementy mogące podlegać modyfikacjom, np. nazwa własna czcionki, ścieżka katalogu dostępu do czcionki):

/* Webfont: Lato-Regular */@font-face {
    font-family: 'LatoWeb';		/* samodzielnie nadana nazwa czcionki, do użycia w innych regułach */
    src: url('fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

Weryfikacja faktycznego użycia zastosowanej czcionki jest możliwa poprzez narzędzia deweloperskie przeglądarki internetowej. W chwili pisania tego zadania jedyną przeglądarką, która to umożliwiała jest Mozilla Firefox. Należy uruchomić narzędzia przyciskiem F12 lub prawym przyciskiem myszy i wybrać Zbadaj. Następnie trzeba zaznaczyć wybrany węzeł HTML, który chcemy sprawdzić pod kontem użycia konkretnej czcionki.

./katalog-witryny-z-szablonu
├── inne-katalogi
├── libs-1-font
│   ├── fonts
│   │   └── lato.ttf
│   └── latofont.css
└── index.html

1.

2.

3.

4.

5.

Znajdź popularne czcionki w sieci, zweryfikuj licencję, pobierz je oraz zastosuj na dedykowanej podstronie swojej witryny. Czcionka powinna zostać zaprezentowana (zestaw znaków) wraz z podaniem nazwy, licencji oraz źródła. Przykładowa lista czcionek:

• Aurabesh

• Elficki

• Klingoński

• GTA