KENTYPE logo Zamówienie Partnerzy Poradnik O firmie Fonty
spacer
 
 
 


W podstawowej składni HTML można zapisać wiele nazw fontów a nawet typ rodziny (szeryfowe, bezeszeryfowe) tak aby zapewnić maksymalną kompatybilność pomiędzy systemami i różnymi przeglądarkami. W przypadku niemożności odnalezienia pierwszego fontu z listy, przglądarka próbuje zastosować następny. Cześto na końcu listy podaje się najbardziej ogólny typ aby w sytuacji kryzysowej (braku jakiegokolwiek podobnego fontu) otrzymać w miarę przewidywalny wynik zastąpienia.

Często stosuje się poniższe kombinacje mające na celu ujednolicenie wyglądu tekstu: Georgia, serif "Palatino Linotype", "Book Antiqua", Palatino, serif "Times New Roman", Times, serif Verdana, Geneva, sans-serif "Trebuchet MS", Helvetica, sans-serif Arial, Helvetica, sans-serif Impact, Charcoal, sans-serif Tahoma, Geneva, sans-serif "Courier New", Courier, monospace "Lucida Console", Monaco, monospace

Porównaj sposób wyświetlania poniższego tekstu na przykładzie popularnych fontów:

Na szarym tle jest wyświetlany tekst, generowany na podstawie zainstalowanych fontów w Twoim komputerze. Na białym tle, dla porównania (i jakbyś nie miał zainstalowanych tych konkretnych fontów) umieściliśmy tekst w postaci bitmapy.

Arial (Twój system)
Arial, Helvetica, sans-serif
Web fontów żądań sześć
Arial (bitmapa)
 
Impact (Twój system)
Impact, Charcoal, sans-serif
Web fontów żądań sześć
Impact (bitmapa)
 
Tahoma (Twój system)
Tahoma, Geneva, sans-serif
Web fontów żądań sześć
Tahoma (bitmapa)
 
Verdana (Twój system)
Verdana, Geneva, sans-serif
Web fontów żądań sześć
Verdana (bitmapa)
 
Times (Twój system)
Times, serif
Web fontów żądań sześć
Times (bitmapa)
 
Courier (Twój system)
"Courier New", Courier, monospace
Web fontów żądań sześć
Courier (bitmapa)
 
Lucida Console (Twój system)
"Lucida Console", Monaco, monospace
Web fontów żądań sześć
Lucida Console (bitmapa)

Jak widać powyżej podobieństwo jest dość duże, choć efekty nie są identyczne. To były tzw. fonty systemowe i to nawet tzw. „core fonts”.

 

 

Zobaczmy jak prezentują się fonty mniej popularne:

Cyne
Web fontów żądań sześć (edytuj tekst)
Univers® 57 Condensed
Web fontów żądań sześć (edytuj tekst)
Avenir® Next Ultra Light
Web fontów żądań sześć (edytuj tekst)

Skąd i dlaczego powyższe napisy (tak, tak, to nie są bitmapy ale napisy czyli zwykły tekst) są widoczne jako konkretne fonty, które przecież nie są zaistalowane w Twoim systemie? I to na dodatek z możliwością edycji?

Odpowiedź jest prosta - to są właśnie WEB-fonty, które będą wyglądać poprawnie u wszystkich osób odwiedzających Twoją stronę www.

UWAGA
Jest to bardzo mało prawdopodobne (ale wciąż jest), że powyższe teksty nie są wyświetlane poprawnie i nie widzisz różnicy pomiędzy zaprezentowanymi fontami. Najprawdopodobniej oznacza to, że używasz starej przeglądarki, dla której WEB-fonty są czymś nowym, niepojętym. Ewentualnie przybywasz z przeszłości i technologie XXI wieku przekraczają możliwości Twojego sprzętu... ;-)

W jednym czy w drugim przypadku - jeśli możesz - użyj innej przeglądarki.

 

 

Instalowanie WEB-fontów

Technologia WEB-fontów jest obsługiwana przez większość przeglądarek internetowych obecnych na rynku. Ponieważ przeglądarki pochodzą od różnych producentów - sposób obsługi WEB-fontów jest trochę inny w każdej z nich. Aby więc mieć pewność, że strona będzie poprawnie wyświetlana we wszystkich (a przede wszystkich starszych) przeglądarkach, należy dysponować czterema formatami zapisu WEB-fontów:
WOFF, EOT, TTF-web, SVG.

UWAGA
Poniższy opis dotyczy sytuacji, w której posiadasz dostęp do plików w formatach WEB, tzn. wykupiłeś opcję tzw. „self hosting”. Możesz więc decydować gdzie umieścisz pliki i jakie nazwy przypiszesz fontom. Zdarza się, że niektórzy producenci zamiast plików fontów udostępniają tylko link do WEB-fontów w swojej chmurze. W takiej sytuacji punkty 1 oraz 2 nie będą Ciebie dotyczyć.

1. Wgranie fontów do serwera

Pierwszym krokiem, który należy wykonać jest wgranie plików fontów w odpowiednie miejsce na serwerze. Dokładna lokalizacja będzie wynikała z zastosowanych rozwiązań bądź po prostu z porządku w strukturze katalogów. Ponieważ później pliki stylów będą odwoływać się do tej lokalizacji, ważne jest aby nie przenosić później plików w inne miejsce.

2. Dołączenie wpisu WEB-fontu do listy styli

Specjalna składnia deklaracji opisu WEB-fontów pozwala na poinformaowanie przeglądarki z jakimi formatami będzie miała do czynienia i gdzie zlokalizowane są pliki w drzewie katalogów.

I tak, jeśli WEB-fonty zostaną wgrane do głównego katalogu, wpis ten będzie miał postać:

Natomiast, jeśli WEB-fonty zostaną wgrane do innego katalogu (np: „Admin/Fonty/”), wpis ten będzie miał postać:

Powyższa deklaracja WEB-fontu może być umieszczona albo w części <HEAD>... </HEAD> nagłówka strony głównej albo w oddzielnym pliku styli CSS. O tym napiszemy za chwilę.

Nie martw się skąd wziąć poprawny zapis kodu deklaracji WEB-fontów. Otrzymasz go od nas z każdym pakietem WEB-fontów!

3. Tworzenie własnej listy styli

Aby móc korzystać z WEB-fontów musisz przypisać WEB-fonty do używanych styli. Wyszukaj w powyższych listingach właściwość „font-family”. Nazwa tam występująca będzie nazwą, którą się będziesz posługiwał przy wyborze konkretnego WEB-fontu.

Załóżmy więc, że chciałbyś aby wszystkie nagłówki <h1> na twojej stronie wykorzystywały WEB-font o nazwie „MojFontWeb”, deklaracja stylu nagłówka przybierze postać:

Dla bezpieczeństwa zwykle uzupełnia się listę preferowanych fontów o fonty podobne, gdyby z niewiadomych powodów priorytetowy (pierwszy z listy) font nie był dostępny.

Jeśli chcesz umieścić wpis w nagłówku strony głównej, kod strony może mieć postać jak poniżej:

Jeśli chcesz umieścić wpis w oddzielnym pliku styli CSS np w pliku „mojestyle.css”, kod strony głównej może mieć postać jak poniżej:

Oto jeszcze inne możliwości formatowania tektu na Twojej stronie:

Jeśli chcesz aby wszystkie teksty na stronie wykorzystywały WEB-font o nazwie „MojFontWeb”

Jeśli chcesz aby wszystkie nagłówki na stronie wykorzystywały WEB-font o nazwie „MojFontWeb” musisz przypisać font do znaczników <h1>...<h5>

Oczywiście możesz utworzyć nową klasę HTML, dzięki której będzie można wykorzystywać wiele WEB-fontów na jednej stronie w różnych wariantach, stylach, wielkościach, etc. Deklaracja stylu CSS przybierze postać:

Natomiast wywołanie stylu w sekcji <BODY> będzie wyglądać tak: