This post comes from the first version of this blog.
Please send me an email if anything needs an update. Thanks!

Jakiś czas temu na blogu umieściłem wpis traktujący o moim zdaniem genialnym szablonie LightWord do WordPressa i “problemie”, jaki napotkałem podczas próby uzyskania polskich znaków w tytułach wpisów. Tytuły te [oraz kilka innych elementów na stronie], zawdzięczają swój wygląd funkcjonalnościom skryptu Cufon, służącego do podmiany standardowych, typowych czcionek określonych elementów witryny na własne, nawet takie, które nie są obecne w zbiorach systemowych odwiedzającego nas Internauty. W tamtym wpisie potraktowałem temat “po łebkach”, ponieważ sama biblioteka nie była głównym celem. Tym razem naprawiam swój błąd i dokonuję “porządnego” podsumowania funkcjonalności i różnych zagadnień związanych z korzystaniem z Cufona.

“Cufon - czcionki dla ludzi”.

Czym jest sam Cufon? Pozwolę sobie posłużyć się akapitem “About” ze strony projektu w serwisie GitHub:

Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set:

• No plug-ins required – it can only use features natively supported by the client.
• Compatibility – it has to work on every major browser on the market.
• Ease of use – no or near-zero configuration needed for standard use cases.
• Speed – it has to be fast, even for sufficiently large amounts of text.

And now, after nearly a year of planning and research we believe that these requirements have been met.

Wersja polska / natywna ;] [tłumaczenie własne]:

Cufón stara się zająć pozycję godnej alternatywy dla technologii sIFR, która pomimo wielu zalet jest bardzo trudna w konfiguracji i użytkowaniu. Żeby osiągnąć tak ambitne cele zostały określone następujące wymagania:

• Brak zewnętrznych wtyczek - biblioteka będzie korzystała wyłącznie z funkcji wspieranych przez przeglądarkę klienta.
• Kompatybilność - narzędzie musi działać na wszystkich głównych przeglądarkach dostępnych na rynku.
• Łatwość użycia - nie będzie wymagana żadna lub prawie żadna konfiguracja dla standardowych przypadków użycia.
• Szybkość - skrypt musi działać szybko, nawet dla znacznych ilości tekstu.

W tym momencie, po prawie roku projektowania i eksperymentów wierzymy, że wszystkie powyższe wymagania zostały spełnione.

Myślę, że tym razem wyjątkowo mam niewiele do dodania w kwestii informacji o samej bibliotece. ;]

"Strona serwera", czyli co "siedzi pod maską".

Jak to działa? Pomimo tego, że dokładny opis mechanizmów stojących za tak zaawansowaną funkcjonalnością jest dosyć trudny, samo omówienie schematu działania da się już przedstawić w miarę przystępny sposób. A zatem:

Pierwszym etapem jest przetworzenie pliku czcionki [w formacie TTF, OTF i podobnych] na format SVG korzystając z wolnego narzędzia FontForge. W tym momencie wszystkie znaki dostępne w czcionce są zapisane w formie grafiki wektorowej. Następnie dane są konwertowane do postaci ścieżek VML, który to język jest obsługiwany bezpośrednio przez Internet Explorera, przez co możliwa jest bezproblemowa obsługa czcionek Cufona przez tą przeglądarkę. Ostatnim etapem jest eksport ścieżek VML do formatu JSON, w którym to otrzymujemy gotowy plik skryptu JavaScript rejestrujący naszą czcionkę w bibliotece.

Proste, prawda?

Przekonałeś mnie, chcę spróbować. ;]

Aby skorzystać z dobrodziejstw biblioteki Cufon, należy wykonać kilka bardzo prostych kroków. Pierwszym i oczywistym jest znalezienie czcionki, którą chcemy "przerobić" i zdobycie odpowiednich plików - ważne: sprawdźcie dokładnie licencję, bo nie każdy font można wstawić w ten sposób. Następnie uruchamiamy w przeglądarce stronę generatora skryptów czcionek pod odpowiednim adresem. Tutaj w pierwszym bloku wybieramy odpowiednie pliki i potwierdzamy, że mamy prawo do ich przetworzenia. W drugim należy wybrać zestaw znaków, jaki będzie nam potrzebny, można też zaznaczyć po prostu pierwszy checkbox, co spowoduje włączenie wszystkich dostępnych znaków - będzie to jednak spore obciążenie, ponieważ plik wynikowy potrafi wtedy osiągnąć rozmiar kilkuset kB. W ostatnim bloku zaznaczamy checkbox potwierdzający naszą znajomość i zgodę na warunki korzystania z usługi i... "Let's do this!". ;]

Mając gotowy plik możemy przystąpić do podmiany czcionek na naszej stronie internetowej. Aby to zrobić musimy w znacznikach