Czym są fonty webowe?
Fonty webowe to fonty, które mogą być używane na stronie internetowej i wyświetlane przez przeglądarkę. Przeglądarka pokaże dany font tylko wtedy, gdy ma do niego dostęp.
Dostęp może oznaczać:
- font jest zainstalowany w systemie użytkownika, np. Arial, Times New Roman,
- font został dołączony do strony i pobrany z serwera,
- font pochodzi z zewnętrznej usługi, np. Google Fonts lub Adobe Fonts.
Fonty lokalne i fonty osadzone
Jeżeli w CSS wpiszemy tylko nazwę fontu, np.:
body {
font-family: Arial, sans-serif;
}
przeglądarka użyje fontu Arial, jeśli jest on dostępny w systemie użytkownika. Jeśli go nie ma, zastosuje font zastępczy z rodziny sans-serif.
Aby mieć większą kontrolę nad wyglądem strony, można osadzić font przez regułę @font-face:
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2");
}
body {
font-family: "MyFont", sans-serif;
}
Wtedy przeglądarka pobiera plik fontu i może go użyć na stronie.
Najczęstsze formaty fontów w WWW
W projektowaniu stron internetowych najczęściej stosuje się formaty:
- WOFF2 – nowoczesny, dobrze skompresowany format,
- WOFF – starszy, nadal szeroko obsługiwany,
- TTF/OTF – popularne formaty fontów, ale rzadziej zalecane bezpośrednio w WWW.
Ważne na egzaminie
Przeglądarka internetowa nie wyświetla fontów „w każdym formacie” ani takich, które zostały zamienione na krzywe lub zrasteryzowane. Wyświetla fonty, do których ma dostęp: lokalnie lub przez plik dołączony do strony.