Udostępnij za pośrednictwem

  • Artykuł

          

Encyklopedia: Jak używać niestandardowych fontów - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Jakub Kędziora

Opublikowano: 2011-10-18

Projektowanie stron internetowych najczęściej zmusza nas do używania standardowych fontów, czyli takich, które są wgrywane w system operacyjny w momencie jego instalacji. Są to na przykład: Times New Roman, Arial, Tahoma czy Verdana. Co jednak zrobić w przypadku, gdy chcemy użyć fontu na stronie WWW, który standardowo nie jest zainstalowany w naszym, a co gorsza w systemie osoby która odwiedzi naszą stronę? W takiej sytuacji z pomocą przychodzi mechanizm Web Fonts, który został określony w specyfikacji CSS i który tymczasowo instaluje fonty w przeglądarce osoby, która odwiedza stronę internetową.

Font musi być w formacie Embedded OpenType – plik z rozszerzeniem .EOT. Możemy też wykorzystać program o nazwie Web Embedding Fonts Tool do konwersji z innych formatów, tj. OpenType font (otf) czy TrueType fonts (ttf).

Przykład

W przykładzie posłużymy się fontem w formacie .otf, (w naszym przypadku test.eot). Fonty możesz pobrać, wyszukując na stronie www.bing.com frazy: embedded opentype fonts. Wstaw poniższy kod do pustej strony HTML, w dowolnym edytorze, a następnie umieść stronę i plik fontu w formacie .eot w tym samym katalogu na serwerze:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Jak używać niestandardowych fontów</title>
    <style type="text/css">
        @font-face {
            font-family: nowa;
            src: url(test.eot);    }
        p { font-family: nowa, Tahoma, Arial; }    
    </style>
</head>
<body>
<p>Tekst, który wyświetlony jest przy użyciu niestandardowej czcionki ().</p>
</body>
</html>

Opis poszczególnych części kodu:

@font-face {
    font-family: nowa;
    src: url(test.eot); }

Jest to wspomniany wcześniej mechanizm Web Fonts. Jako atrybut elementu font-family możemy wpisać dowolną nazwę, która od teraz będzie używaną nazwą fontu w dokumencie. Jako atrybut elementu src musimy podać lokalizację do pliku z fontem.

p { font-family: nowa, Tahoma, Arial; }

Znacznikowi p jako atrybut font-family przypisujemy trzy fonty, pierwszy z nich to font umieszczony za pomocą mechanizmu Web Fonts, a dwa kolejne to standardowe fonty, który zostaną użyte w przypadku, gdyby z pierwszym były jakiekolwiek problemy.

Rys. 1.Tekst wyświetlony w przeglądarce Internet Explorer 9 przy użyciu niestandardowej czcionki.

Sprawdź