Praktyczne informacje i specjalne oferty prosto na Twoją skrzynkę email.
Od teraz o wszystkim co godne uwagi dowiesz się błyskawicznie.
Ty też możesz chronić stronę i swoich Klientów. Sprawdź szczegóły.
Zazwyczaj projekty naszych stron www wyglądają fantastycznie w Photoshopie lub innych narzędziach do projektowania graficznego. W dużej mierze przyczyniają się do tego piękne, nietypowe czcionki użyte w projekcie. Niestety, nie każdy odwiedzający naszą witrynę posiada zainstalowane lokalnie czcionki przez nas użyte i w efekcie wygląda ona wówczas znacznie mniej atrakcyjnie.
Jak poradzić sobie z tym problemem? Jedną z metod jest wykorzystanie arkuszy stylów CSS3, które umożliwiają użycie i poprawne wyświetlenie dowolnej czcionki umieszczonej razem z Twoją stroną na serwerze bez względu na to czy użytkownik posiada ją zainstalowaną lokalnie na swoim komputerze lub urzadzeniu czy nie.
Oto, jak w kilku krokach dołączyć własną czcionkę na stronie www:
Upewnij się, że czcionka, której chcesz użyć posiada licencję na użycie na stronie www. Prawie wszystkie darmowe czcionki mogą być użyte na stronach, a także wiele licencjonowanych czcionek jest dostępnych na licencji zezwalającej ich użycie na stronie www.
Następnie załaduj wybraną czcionkę na serwer. Możesz przechowywać ją w osobnym folderze czcionek, np. fonts, ale jest to opcjonalne. Pamiętaj, aby dołączyć pliki z każdą odmianą czcionki, którą planujesz użyć, taką jak pogrubienie czy kursywa.
Otwórz plik html lub plik arkusza styli CSS strony, nad którą pracujesz. Dodaj deklarację font-face do kodu:
@font-face { }
Wewnątrz sekcji font-face, nadaj czcionce nazwę, za pomocą której będziesz się później do niej odwoływał:
font-family: ‘lovelyFont’;
Następnie wskaż lokalizację pliku czcionki w formacie EOT:
src: url('fonts/lovely_font.eot');
i kolejno w analogiczny sposób dodaj czcionki w formacie OTF i/lub TTF:
src: url('fonts/lovely_font.otf'); src: url('fonts/lovely_font.ttf');
To podstawowy kod, który powinien być wystarczający w większości przypadków. Jakkolwiek możemy dodać kilka wierszy, które uczynią go bardziej niezawodnym. Najpierw umieść w tej sekcji wskaźnik typu pliku czcionek:
src: url('fonts/lovely_font.otf') format('opentype'); src: url('fonts/lovely_font.ttf') format('truetype');
Innym, opcjonalnym, środkiem poprawy efektywności jest sprawdzenie przez przeglądarkę czy nie posiada już lokalnej kopii czcionek, w przypadku gdy są już zainstalowane na komputerze użytkownika. Rozszerz więc kod o sekcję lokalną przed wyspecyfikowaniem adresu URL, co spowoduje, że czcionka jest ściągana tylko, gdy to konieczne:
src: local('Lovely Font'), local('Lovely-Font'), url('fonts/lovely_font.otf') format('opentype'); src: local('Lovely Font'), local('Lovely-Font'), url('fonts/lovely_font.ttf') format('truetype');
Dodanie sekcji lokalnej jest takie same dla czcionek OTF i TTF.
W powyższym przykładzie wpis specyfikujący lokalną czcionkę pojawia się dwa razy, gdyż nazwa czcionki jest dwuczłonowa. Nazwa w wersji z łącznikiem przeznaczona jest dla systemów operacyjnych, które zapamiętują nazwy czcionek w ten sposób. Dodatkowy wiersz nie jest konieczny gdy nazwa czcionki jest jednowyrazowa. Jeśli wiesz, że czcionka może mieć różne nazwy w różnych systemach operacyjnych, dołącz obie wersje w sekcji local.
W końcu możemy użyć zdefiniowaną czcionkę do wybranych elementów strony. W kodzie CSS wybranego elementu lub grupy elementów wyspecyfikuj nazwę czcionki, której chcesz użyć:
div { font-family: 'lovelyFont', sans-serif; }
W przypadku gdy chcesz także użyć pogrubionej odmiany czcionki, dołącz kolejną sekcję font-face z adresem URL do pliku odpowiedniej wersji oraz deklarację „font-weight:bold;”. W dodanej sekcji użyj tych samych elementów specyfikacji jak w przypadku domyślnej wersji czcionki, a przeglądarka automatycznie zastosuje ją do odpowiednich elementów strony:
/*default version*/ @font-face { font-family: 'lovelyFont'; src: url('fonts/lovely_font.eot'); src: local('Lovely Font'), local('Lovely-Font'), url('fonts/lovely_font.otf') format('opentype'); } /*bold version*/ @font-face { font-family: 'lovelyFont'; src: url('fonts/lovely_font_bold.eot'); src: local('Lovely Font Bold'), local('Lovely-Font-Bold'), url('fonts/lovely_font_bold.otf') format('opentype'); font-weight: bold; } /*container element*/ div { font-family: 'lovelyFont', sans-serif; } /*span elements inside the container div*/ span { font-weight: bold; }
Jak ułatwić sobie życie?
Możesz skorzystać z narzędzi, które wygenerują dla Ciebie cały kod niezbedny do tego aby wykorzystać font-face i czcionki jakie użyłeś w projekcie swojej strony. Taki bezpłatny generator dostępny on-line znajdziesz pod adresem http://www.fontsquirrel.com/fontface/generator.
Inne metody związane z wykorzystaniem niestandardowych czcionek takie jak Cufón, Google Fonts i im podobne przedstawimy w kolejnych artykułach.
Udostępnij ten artykuł innym: