portfolio

Plugin, wtyczki, skrypty, darmowe materiały wszytko co pomaga w web design.

Cufon – własna czcionka na stronie

// 13 lutego, 2011 //

Tools

Przeglądając kilka metod na osadzanie czcionki w serwisach, pomiędzy sIFR, a font-face, po dość stare rozwiązanie z zamiana czcionki na obrazki, znalazłem Cufona. Jest to rozwiązanie bazujące na generowaniu czcionki całkowicie poprzez JavaSrcipt oraz funkcjonalnością HTML5 – <canvas>. Cufon po kilku testach jest też najlepszy wizualnie tzn. generuję czcionkę najlepiej i najbliżej projektowi w Photoshopie, w szczególności dla mniejszych rozmiarów czcionek, z czym np. ma problem font-face. Jest to też metoda bardzo wygodna w użyciu.
 

Jak używać Cufon?

 
 
Używanie Cufona jest proste.

  1. Wchodzimy na stronę cufon.shoqolate.com/generate/ i ściągamy plik cufon-yui.js
  2. Ściągamy najnowszą wersję bibloteki JQuery
  3. Konwertujemy pliki czcionki – formaty TFF, OTF, PFB, poprzez generator na stronie.  Wygląda to tak – wybieramy czcionkę do uploadowania w odpowiednim kroju, następnie zaznaczamy interesujące nas zakresy znaków i zaznaczamy akceptację regulaminu. (dla polskich znaków zaznaczamy – Basic Latin, Latin-1 Supplement, Latin-Extended-A, Latin-Extended-B)
  4. Ściągamy wygenerowany plik Javascript  – czcionka.js
  5. W sekcji <head> dołączamy obydwa pliki do serwisu:

    <script src=”cufon-yui.js” type=”text/javascript”></script>
    <script src=”czcionka.js” type=”text/javascript”></script>

  6. Definiujemy elementy dla , których Cufon na zadziałać:

<script type=”text/javascript”>
Cufon.replace(‘h1′);
</script>

W tym przypadku oznacza to zamianę każdego nagłówka typu H1, na naszą czcionkę.

Jeżeli dołączamy więcej niż jeden plik z czcionką elementy definiujemy w taki sposób:

<script type=”text/javascript”>
Cufon.replace(‘h1′, { fontFamily: ‘naszaczcionka1′ });
Cufon.replace(‘.jakas_klasa’, { fontFamily: ‘naszaczcionka2′ });
</script>

 
 
Cufon to duży zbiór zalet – działa pod IE6.0 (jeżeli ktoś jeszcze tworzy pod tą przeglądarkę) , łatwość konfiguracji, brak dodatkowych playerów do odtworzenia oraz szybkość działania.
Należy jednak pamiętać o kwestii prawnej – nie każda licencja czcionki pozwala na jej osadzenie na stronie www bez łamania praw autorskich.

O autorze postu:

Stripes - to blog o projektowaniu - design. Zawiera artykuły stanowiące inspirację jak i porady z zakresu web design, ilustracji, projektowania graficznego oraz ciekawe reklamy kreatywne. Piszemy również o metodach projektowych oraz inspirujących stronach www.

Kolejne posty

Powrót do góry

Ostatnio dodane

Alivia kampania – wygraj z rakiem

Platige Image wraz z współpracą z Saatchi&Saatchi/Interactive Solutions pokazało swój kunszt i klasę. Tym razem w nowej reklamie kampanii Alivii – fundacji onkologicznej, która zachęca

/ czytaj więcej

Darmowe czcionki #5

Wraz z wiosną wracamy do cyklu o typografii – darmowe czcionki . Tym razem kilka wyselekcjonowanych krojów z polskimi znakami w sam raz do nowych

/ czytaj więcej

Web design – inspirujące strony #3

Nowy miesiąc to najlepszy czas na nowe inspiracje – kolejny w cyklu web design inspiracje. Garść pomysłów i rozwiązań stosowanych przez innych twórców. Szczypta inspiracji

/ czytaj więcej