chevron-left chevron-right

Piotr Nalepa Frontend, architektura i AI

[CSS][JS] Metody dodawania ładnych czcionek na stronę

Ta wersja
blog.piotrnalepa.pl/2011/05/31/cssjs-metody-dodawania-ladnych-czcionek-na-strone
Opublikowano
Autor
, Staff Software Engineer
Kategorie
CSS, JavaScript
Uwagi
Napisz do mnie · Napisz na X

Ten wpis ma 15 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.

Sekcja 1Cufon

Twierdzi się, że Cufon jest dobrą alternatywą dla metody sIFR. Jako następca Typeface jest o wiele łatwiejszy w implementacji i posiada pełną obsługę CSS.

Sekcja 1.1Implementacja kodu na stronie WWW

Podobnie jak w powyższych przykładach, do sekcji head należy dodać odpowiedni kod JS:

Przykład 1HTML
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/czcionka.font.js" type="text/javascript"></script>

W ten sposób, Cufon domyślnie podmienia czcionki w nagłówkach na te "embedowane".
Można też rozszerzyć sposób działania Cufon poprzez dodanie krótkiego kodu JS, który pomoże nam zdefiniować które elementy mają być podmieniane:

Przykład 2JavaScript
Cufon.replace('.cufon');

Powyższy kod zastosuje nową czcionkę dla elementów mających klasę Cufon. Należy pamiętać o tym, by do pliku strony dołączyć bibliotekę jQuery w celu poprawnego działania powyższego kodu.

Sekcja 1.2Problem z działaniem w IE

Cufon wykazuje pewien problem w działaniu w przeglądarkach Internet Explorer. Objawia się on tym, że jest niewielkie opóźnienie w czasie zanim czcionka zostanie podmieniona. Dlatego, aby temu zapobiec, należy na koniec strony, tuż przed znacznikiem końcowym sekcji body wstawić taki kod:

Przykład 3HTML
<script type="text/javascript"> Cufon.now(); </script>

Dzięki niemu, nie będzie już opóźnienia w podmianie czcionek w przeglądarkach Internet Explorer.

Sekcja 1.3Zalety i wady

Zalety

  • szybkie działanie
  • lepsza obsługa CSS niż w przypadku Typeface
  • do działania nie potrzebuje obsługi Flash tylko JavaScript
  • jest możliwość używania wielu różnych czcionek

Wady

  • brak możliwości zaznaczania tekstu
  • tekst jest generowany jako obraz
  • problemy z licencjami czcionek
  • czcionki muszą być sformatowane w UTF-8

Sekcja 1.4Cufon - Podsumowanie

Cufon na pewno dobrą alternatywą dla sIFR, ale ze względu na problemy z zaznaczaniem tekstu, który staje się obrazkiem, może się ta metoda okazać bezużyteczna w pewnych przypadkach.

Udostępnij
Uwagi

O autorze

Staff Software Engineer

Piszę na tym blogu od 2009 roku, a strony i aplikacje webowe tworzę zawodowo od 14 lat. Obecnie w Bishop Fox prowadzę frontend platformy Cosmos, od samego początku projektu. Wcześniej pracowałem m.in. w OLX, KUDO, Auto1 i eZ Systems. Piszę tu o tym, czego nauczyłem się w praktyce: o JavaScripcie, TypeScripcie, Reakcie, CSS-ie i architekturze frontendu. Występowałem też jako prelegent na konferencjach w Polsce i Europie. Masz pytanie albo pomysł na wpis? Daj znać!