czwartek, 29 lipca 2010

Cufón - niestandardowe fonty w służbie web designerom

W jednym z moich pierwszych postów prezentowałem ciekawe i przydatne narzędzia dla webmasterów, jednym z nich był Cufon, czyli narzędzie do wstawiania niestandardowych fontów na swoją stronę. Pokażę dzisiaj jak wstawić wybraną czcionkę na blog znajdujący się na platformie blogger.com, to samo dotyczy innych stron jednak dodatkowo posłużę się stroną code.google.com, która posłuży mi za hosting dla moich plików javascript (blogger.com nie umożliwia hostowania plików js).

Wchodzimy na stronę projektu Cufon i tam ściągamy najnowszą wersję tego skryptu (przycisk Download Source). Teraz wchodzimy na stronę code.google.com i zakładamy swój własny projekt, na który będziemy wrzucać swoje pliki javascript. Google oczywiście umożliwia hostowanie różnych plików, jednak tutaj będą użyte pliki js. Teraz po założeniu projektu przechodzimy w zakładkę Downloads i wrzucamy plik cufon.js poprzez przycisk New Download. Ja zrobiłem to wcześniej dlatego nie musicie już tego robić i możecie po prostu skorzystać z mojego linka.

<script src='http://agahmemnon.googlecode.com/files/cufon.js' type='text/javascript'/>

Jednak jeśli ktoś chce może użyć swojego hostingu. Pierwszy krok mamy za sobą, teraz pozostaje jeszcze kilka równie łatwych. Czas teraz wybrać odpowiednią czcionkę, najlepiej by były to fonty z polskimi znakami, wtedy mamy pewność, że podmienią nam się wszystkie znaki.

Teraz nadszedł czas na wygenerowanie odpowiedniego pliku z wybraną czcionką, wrzucamy ją do generatora zaznaczając oprócz standardowych znaków opcje Latin-1 Supplement, Latin Extended-A, Latin Extended-B. W któryś z tych rozszerzeń znajdują się polskie znaki. Generujemy teraz plik, który również wrzucamy na serwer (np. google.code.com). Ja na tym blogu użyłem fonta PT Sans.

<script src='http://agahmemnon.googlecode.com/files/pt_sans_700.font.js' type='text/javascript'/>

Teraz mamy już gotowe pliki do zastosowania na blogu, wystarczy jeszcze dopisać:

<script type='text/javascript'> 
 Cufon.replace('h3'); 
</script>

gdzie h3 to selektor, który ma być podmieniany, gdy chcemy podmienić więcej niż jeden to wystarczy dopisać go po przecinku:

<script type='text/javascript'> 
 Cufon.replace('h3, .jakas_klasa'); 
</script>

A gdy chcemy zastosować więcej niż jeden font, dopisujemy jego nazwę:

<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Vegur' });
Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
  </script>


Cufon to bardzo proste narzędzie, a zarazem bardzo skutecznie, coraz więcej stron wykorzystuje go do generowania własnej typografii na stronach, czy to jako nagłówki, przyciski menu, a ostatnio nawet do podmiany zwykłego tekstu, jedynym mankamentem może być to, że tekst najpierw wczytywany jest standardową czcionką a dopiero potem Cufon "wskakuje" co może być lekko irytujące

Autor: Marcin Piszczek

Interesuję się designem, internetem i nowinkami technicznymi. Z zamiłowania jestem web developerem i web designerem,a od jakiegoś czasu również blogerem. W wolnych chwilach gram w DotA. Kibicuję Zagłębiu.

Masz jakieś sugestie? Napisz do mnie. Możesz mnie również obserwować na Twitterze.
blog comments powered by Disqus

Wszystko o designie, dużo inspiracji i tutoriali.

Copyright 2009 - 2012 Creatyna. All rights reserved.