Elektryk
22 sierpień 2009 - 12:54
Częstym problemem przy tworzeniu stron jest ograniczona ilość czcionek z jakich można korzystać. Ten poradnik pokaże jak pozbyć się tego problemu i móc korzystać na stronie z dowolnego fontu.

Wyobraźmy sobie, że tworzymy stronę o Afryce. Wiadomo: brązowa kolorystyka, plemieńskie szlaczki i fajna czcionka w tytułach newsów. Taki font nie jest jednak zainstalowany w żadnym systemie. Bedziemy zatem musieli skorzystać z biblioteki Cufon i wysłać przeglądarce czcionkę za pomocą Javascriptu.

Zaczynamy od pobrania biblioteki Cufon z tego adresu:
http://cufon.shoqola...js/cufon-yui.js

Następnie musimy wygenerować plik Javascript z naszą czcionką. Można to szybko zrobić na stronie: http://cufon.shoqolate.com/generate/

W pierwszych czterech polach możemy wybrać z dysku jaką czcionkę chcemy przetworzyć. Są to pola kolejno do wersji normalnej, pogrubionej, pochyłej oraz pogrubiono-pochyłej. Jeśli nasz font ma tylko jedną wersje (tak jak w naszym przykładzie african.ttf) to korzystamy jedynie z pierwszego pola. W piątym polu wpisujemy jakąś dowolną nazwę dla naszej czcionki (np. african) a w szóstym polu zaznaczamy, że mamy prawo do korzystania z danego kroju. W dalszej części formularza musimy zaznaczyć jakie znaki mają zostać umieszczone w pliku JS. Nie dawajmy tam np. liter greckich z którym zapewne nie skorzystamy a jedynie zwiększymy tym rozmiar naszej strony. Dalsze ustawienia możemy pominąć i jedynie na dole strony zaakceptować regulamin i kliknąć na Let's do it. Po chwili będziemy mogli pobrać naszą przetworzoną czcionkę.

Gdyż już mamy bibliotekę Cufon i gotową czcionkę to wrzucamy obydwa pliki do folderu z stroną i dołączamy je do kodu umieszczając w sekcji HEAD:

<script type="text/javascript" src="cufon-yui.js"></script> <script type="text/javascript" src="african_400.font.js"></script>

Następnie poniżej tego umieszcamy kod:

<script type="text/javascript"> Cufon.replace('.tytulnewsa', { fontFamily: 'african' }); </script>

Zamiast tytulnewsa możemy wpisać dowolną inną klasę CSS użytą na stronie. Skrypt biblioteki zamieni czcionkę w niej na tą podaną jako wartość fontFamily (w naszym przypadku african)

Oczywiście można używać wielu własnych czcionek:

<script type="text/javascript" src="cufon-yui.js"></script> <script type="text/javascript" src="graffiti_300.font.js"></script> <script type="text/javascript" src="reczna_400.font.js"></script> <script type="text/javascript"> Cufon.replace('.zeszyt', { fontFamily: 'reczna' }); Cufon.replace('.sciana', { fontFamily: 'graffiti' }); </script>

Na koniec dowód, że wszystko działa:
 cufon.png (13,55 KB)
Ilość pobrań: 13
KamilGeneral
22 sierpień 2009 - 19:23
Jest też inny sposób w CSS3:
@font-face { font-family: Ginga; src: url(Ginga.ttf); } p { font-family: Ginga; }

Na pewno działa w Operze 10, w innych chyba nie...
aseeon
22 sierpień 2009 - 20:13
@ KamilGeneral
Działa czy nie działa, w 9 czcionkach na 10 łamie się w ten sposób licencję :D
Szczególnie jak jest jakaś czcionka która kupiliśmy za dajmy na to $30 i chcemy za jej pomocą wystylizować nagłówki. Nie robimy nic innego wtedy tylko publicznie ją udostępniamy, idealna do nielegalnego pobrania bez płacenia (czyli Warez).

@temat :D
Niejako alternatywą do cufon jest też http://typeface.neocracy.org/, przykładowy efekt można zobaczyć na http://adam.im/

P.S. Należy pamiętać, że takie przerabianie czcionek też może łamać wiele licencji.
Elektryk
23 sierpień 2009 - 14:45
Na szczęście istnieją serwisy z czcionkami z których można korzystać gdzie się chce i jak się chce: http://www.dafont.com/ (licencje dla danej czcionki należy sprawdzić nad przyciskiem pobierania).
aseeon
27 sierpień 2009 - 22:57
Właśnie największym mitem jest to, że jak masz tam napisane dajmy na to "Free for personal use" to możesz ją tak zmodyfikować. Otóż najczęściej nie :)
Jak sama "nazwa" wskazuje, free for personal use. A nie Free to modify, albo cokolwiek podobnego. Także trzeba na to uważać.


Podobne tem