| |
|
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:
|
|
