Cufon – Własna czcionka na twojej stronie.

Chciałbym podzielić się z Wami koncepcją używania zewnętrznych czcionek na stronach internetowych. Oczywistym jest, że przy projektowaniu stron internetowych trzeba przewidzieć, że nie każdy ma zainstalowaną czcionkę, której akurat chcielibyśmy użyć na przygotowywanej stronie. Z pomocą przychodzi Cufon’a wielkim plusem jest to, że w przeciwieństwie do powszechnie używanego sIFR’a nie potrzebuje Flash Player’a, a korzysta [...]

cufon_mini

Chciałbym podzielić się z Wami koncepcją używania zewnętrznych czcionek na stronach internetowych. Oczywistym jest, że przy projektowaniu stron internetowych trzeba przewidzieć, że nie każdy ma zainstalowaną czcionkę, której akurat chcielibyśmy użyć na przygotowywanej stronie. Z pomocą przychodzi

Cufon’a wielkim plusem jest to, że w przeciwieństwie do powszechnie używanego sIFR’a nie potrzebuje Flash Player’a, a korzysta z funkcjonalności HTML5 – <canvas>. Dzięki temu działa szybciej niż poprzednik oraz wygodniej jest go używać.

Jak używać Cufon?

Na początku z www.cufon.shoqolate.com i ściągamy plik cufon-yui.js. Następnie za pomocą generatora znajdującego się na stronie (podajemy ścieżkę do czcionki na dysku, akceptujemy regulamin, a jeżeli potrzebujemy polskie znaki to w zakładce “include the following glyphs” wybieramy: Basic Latin, Latin-1 Supplement, Latin-Extended-A, Latin-Extended-B) tworzymy kolejny plik .js. (naszaczcionka_400.js) Cufon.

W sekcji <head> dołączamy dwa ściągnięte pliki .js:

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

Następnie definiujemy elementy, których czcionka ma zostać zmieniona, np.:

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

Powyższy kod oznacze, że wszystkie nagłówki h1 będą wyróżnione 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>

Oczywiście musimy pamiętać o tym, że nie każda czcionka może zostać skonwertowana ze względu na licencję i prawa autorskie.

Problem Cufon`ów w Internet Explorer 9

Rozwiązaniem okazuje się dodanie linijki znacznika <meta> w nagłówku <head>

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />