6 sposobów na dodanie własnej czcionki do strony internetowej

Problem z umieszczeniem własnej czcionki na stronie internetowej istniał od zawsze. Najpewniejszą metodą było wygenerowanie tekstu w programie graficznym, a następnie wstawienie go jako obrazka. Gorsza sprawa, kiedy generowany tekst jest dynamiczny. Na szczęście istnieje coraz więcej mechanizmów, które pozwalają na podmianę tekstu na stronie zgodnie z wyznaczoną czcionką - czy to przy użyciu Flash'a, PHP z biblioteką GD, czy mechanizmów grafiki wektorowej (SVG, VML, canvas).
Przykład z polskimi czcionkami
Google Font API - zażółć gęślą jaźń
Tym razem chciałem przeglądnąć 6 różnych metod generowania - możemy je podzielić na dwie grupy:
API udostępniające czcionki - czyli kawałek kodu JS (podanego przez udostępniającego API) a u nas tylko krótki wpis w CSS, którą czcionkę używamy.

Google przedstawił podczas konferencji Google I/O 2010 nowe API, które pozwala osadzać nam czcionki na własnych stronach. Z testów wynika, że Google Font API radzi sobie nawet z IE6! Jedynym minusem jest mały wybór czcionek, aczkowiek już część z nich posiada polskie znaki - czekamy na dalszy rozwój. Proste wstawianie czcionki - @font-face w stylach.

Zalety:
  • darmowe
  • łatwa instalacja
  • polskie litery
  • działa pod każdą nowoczesną przeglądarką i nie tylko (IE6)
Wady:
  • mało czcionek
Jeden z pierwszych serwisów umożliwiających osadzanie czcionek na swojej stronie - osadzamy podobnie jak w przypadku Google - używając @font-face. Inna sprawa, że panowie z Typekita pomagali Google w budowie ich usługi. Serwis w założeniu ma udostępniać czcionki za pewną opłatą - dzięki temu zyskujemy dużo większy wybór niż w przypadku Google. Ale polskich znaków w czcionkach brak - testowałem kilkadziesiąt i nie było :(

Zalety:

  • łatwa instalacja
  • działa pod przeglądarkami i IE6
  • duży wybór czcionek
Wady:
  • czcionkom brakuje polskich znaków
  • płatne

Biblioteki umożliwiające generowanie własnych tekstów z podanych czcionek - biblioteki JS, PHP i Flash.

Cufón



Jedna z najczęściej przeze mnie stosowanych bibliotek - głównie ze względu na super generator czcionki i bardzo dobrą jakość. Do instalacji potrzebny jest plik cufon.js, plik czcionki i uruchomienie poprzez wykonanie metody Cufon.replace. Działa pod wieloma przeglądarkami - obsługuje hover'y (zmianę stylu po najechaniu - przydatne przy linkach)

Zalety:

  • bardzo dobry i rozbudowany generator plików
  • obsługa hover'a
  • łatwa instalacja
Wady:
  • problemy z zaznaczeniem

Typeface.js


Podobne działanie jak Cufón, natomiast dodatkowym plusem jest nałożenie warstwy z oryginalnym tekstem, co umożliwia jego zaznaczenie i skopiowanie. W porównaniu do wyżej wymienionej biblioteki brakuje tutaj dobrego (opcje konfiguracyjne itd.) generatora fontów. No i nie za bardzo z hover'ami.

Zalety:
  • możliwość zaznaczania tekstu
  • działanie przy wykorzystaniu canvas/VML (po stronie przeglądarki)
Wady:

  • brak obsługi hover
  • brak porządnego generatora fontów online
  • konieczne posiadanie odpowiedniej licencji na czcionki
  • problemy pod Operą

FLiR - Facelift Image Replacement


Podmiana tekstu na obrazki przy wykorzystaniu bibliotek graficznych w PHP. Dzięki temu, że obrazki są generowane na serwerze - wygląda na to, że nie ma konieczności załatwiania dodatkowej licencji Web Embedding (na stronie nikt o tym nie wspomina - w odróżnieniu od autorów pozostałych bibliotek). Problem jest z zaznaczeniem, ponieważ jest to obrazek. Natomiast działa hover, co umożliwia podpięcie np. pod link.

Zalety:

  • działa na wszystkim (co obsługuje obrazki)
  • działa hover

Wady:

  • brak możliwości zaznaczenia pojedynczych literek (tylko cały obrazek)
  • podczas ładowania możliwe opóźnienia (konieczny czas na wygenerowanie)
  • trudniejsza instalacja (trzeba skonfigurować ścieżki itp.)
Jedna z najstarszych metod podmiany czcionki na stronie, dostępna w każdej przeglądarce. Do podmiany wykorzystujemy obiekt Flash, w którym osadzamy czcionkę. Poza problemami z zaznaczeniem (nie ma ciągłości zaznaczenia z resztą strony) oraz pewnymi niedogodnościami jak np. blokowanie oraz możliwe mulenie komputera - umożliwia wykorzystanie efektów dostępnych we Flash'u.

Zalety:

  • działa na każdym komputerze z Flash'em
  • możliwość osadzenia dowolnej czcionki
  • możliwość wykorzystania efektów flash'owych

Wady:

  • problemy związane z Flash'em: zaznaczanie tekstu, inne menu kontekstowe

Miłej podmiany czcionki!

Prześlij dalej:

3 komentarze:

AlchemyCode pisze...

Świetny i szczegółowy artykuł - rispekta :)

Fajny podział na wady i zalety.

Ja chyba największym sentymentem darze Cufón-a, ale najnowszy pomysł Googla jest dla mnie wręcz genialny, zobaczymy tylko jak się rozwinie :)

Krzysztof Kotlarski pisze...

Niezle zestawienie, moznaby jeszcze dodac ze Typeface ma problemy z Opera, jak ostatnio sprawdzalem SiFR to nie mial problemow z zaznaczaniem tekstu

Michał B. pisze...

w SiFR'ze problem z zaznaczaniem tyczy się ciągłości - np. jeśli chcemy zaznaczyć cały artykuł to część napisana SiFR'em się nie zaznaczy i na odwrót - jeśli zaczniemy zaznaczać tekst w SiFR'ze to nie możemy już zaznaczyć reszty tekstu w HTML'u - kwestia plugin'a Flashowego. No i dzięki za słuszną uwagę dotyczącą Typeface - już poprawiam.

Prześlij komentarz