Przeszukaj Wiedzodajnię

Przejdź do wyszukiwarki globalnej

Poradniki na Twój Email

Praktyczne informacje i specjalne oferty prosto na Twoją skrzynkę email.

Wpisz Email: 
 

Ostatnie Artykuły

Jak dodać pasek z informacją o ciasteczkach
 
Apptiker - czyli narzędzia dla strony www
 
Mierzymy wydajność strony internetowej
 
Mniej znane funkcje Google
 
Wielkie zmiany w Google
 

Ostatni komentarz

Subskrybuj kanał RSS

Kanał RSS

Od teraz o wszystkim co godne uwagi dowiesz się błyskawicznie.

U nas jesteś bezpieczny

website security

Ty też możesz chronić stronę i swoich Klientów. Sprawdź szczegóły.

Apptiker

CSS3 - jak korzystać z własnych czcionek

Autor: , Data publikacji , Kategoria: Budowa stron, Porady;
CSS3 - jak korzystać z własnych czcionek

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:

Załaduj czcionkę

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.

Dodaj sekcję font-face w twoim kodzie CSS

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.

Zastosuj czcionkę do elementów strony

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; }

Uwzględnij odmiany czcionki

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.

 

Ocena: 43211 (4.00/5), bazuje na 1 głosie.

 

Udostępnij ten artykuł innym:

 

Podobne artykuły

 
comments powered by Disqus

Hosting

Rejestracja domen

Tworzymy strony WWW

Firma

Platforma hostingowa o12.pl . 2003-2019