Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Dołączanie czcionki do strony

Email Drukuj PDF

Formatowanie wyglądu czcionki w oparciu o poprzednie wersje CSS miało liczne ograniczenia, a najważniejszym z nich było to, że mogliśmy korzystać wyłącznie z czcionek zainstalowanych na komputerze, w którym przeglądano stronę. Jeżeli na przykład uznaliśmy, że nagłówek stopnia trzeciego ma zostać wyświetlony za pomocą unikalnej czcionki naszego autorstwa, to niestety efekt naszej pracy widziały wyłącznie osoby, które zainstalowały udostępnioną przez nas czcionkę.

Wstępna wersja trzeciej specyfikacji CSS daje nam możliwość dołączenia czcionki w formacie OTF do tworzonej strony. Dzięki temu możemy na stronie użyć różnych nietypowych czcionek i wymusić ich prawidłową prezentację po stronie osoby odwiedzającej witrynę, niezależnie od tego, jakie czcionki dostępne są w systemie.

Przykładowe czcionki w formacie OTF możesz pobrać ze strony http://www.fontex.org.

Aby podłączyć plik czcionki pod stronę, należy wykorzystać regułę @font-face. Odpowiedni wpis, jaki musi znaleźć się w arkuszu, ma postać:

@font-face

{

font-family: Quicksand;

src:url(Quicksand_Bold.otf);

}

Pierwsza deklaracja font-family określa nazwę czcionki, z której będziemy korzystać w dalszej części. Użyta nazwa może być dowolna, ale musi być też unikalna. Drugim kluczowym elementem, jaki musimy zadeklarować w ramach reguły @font-face, jest src:url(plik_czcionki.otf). W nawiasie podajemy pełną ścieżkę dostępu do czcionki oraz nazwę pliku. Plik czcionki możemy wgrać na serwer razem z innymi dokumentami HTML/CSS lub możemy odwołać się bezpośrednio do innej witryny i bezpośrednio z niej podłączyć czcionkę.

Po zdefiniowaniu reguły @font-face możemy zacząć korzystać z nowej czcionki. Poniżej przykład wykorzystania w arkuszu stylów w odniesieniu do bloku tekstu. Zwróć uwagę na to, że podajemy nazwę czcionki, którą określiliśmy wcześniej.

DIV

{

font-family:Quicksand;

}

Efekt działania powyższego przykładu powinni zobaczyć posiadacze przeglądarek Opera, Safari oraz Mozilla Firefox. Użytkownicy przeglądarek Google Chrome oraz Internet Explorer efekt wykorzystania własnej czcionki zobaczą na rysunku 15.31.

<<przykład>>

<html>

<head>

<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">

<title>Tytuł Strony WWW</title>

<style type="text/css">

@font-face

{

font-family: Quicksand;

src:url(Quicksand_Bold.otf);

}

 

DIV.col

{

font-family:Quicksand;

}

DIV

{

width:300px;

}

}

</style>

</head>

<body>

<div class="przyklad">

<h3>Tekst z własną unikalną czcionką</h3>

<div class="col">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum hendrerit risus, quis viverra est cursus quis. Donec eu nisi mauris, in laoreet diam. Nulla sit amet velit a metus tincidunt ullamcorper eu ut sem.</div>

<h3>Tekst z domyślną czcionką</h3>

<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum hendrerit risus, quis viverra est cursus quis. Donec eu nisi mauris, in laoreet diam. Nulla sit amet velit a metus tincidunt ullamcorper eu ut sem.</div>

</div>

</body>

</html>

<</przykład>>

Rysunek 15.31. Przykład wykorzystania własnej unikalnej czcionki na stronie

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15458903