Niestandardowe czcionki na stronie WWW

Niestandardowe czcionki Typografia jest jednym z ważniejszych czynników, uwzględnianych przy projektowaniu grafiki na stronę WWW. W dzisiejszych czasach coraz bardziej odchodzi się od standardowych czcionek, a wykorzystuje się niestandardowe czcionki, które wizualnie wyglądają znacznie lepiej.

1. Cufón

Cufón wykorzystuje możliwości SVG i VML, a następnie za pośrednictwem JavaScript dynamicznie osadza je na stronie WWW.

Zalety Cufóna

  • Nie wymaga żadnych pluginów do przeglądarki typu Flash Player.
  • Szybkie ładowanie tekstów.
  • Kompatybilny z najpopularniejszymi przeglądarkami – w tym i z IE6+.
  • Przyjazny SEO.
  • Łatwa implementacja.
  • Istnieje możliwość używania wielu różnych niestandardowych czcionek.

Dlaczego zrezygnowałem z cufóna ?

  • Nie można było zaznaczyć tekstu.
  • Ładowanie dodatkowych bibliotek JavaScript.
  • Nie działa w przypadku wyłączonego JavaScript.
  • Wymagane jest kodowanie pliku UTF-8.

Implementacja Cufóna. Kod dodajmy w sekcji head

<script src="cufon-yui.js" type="text/"></script>
<script src="niestandardowy_font_czcionki.font.js" type="text/javascript"></script>
Cufon.replace('h1,h2,.jakas_klasa');

2. @font-face

Osobiście korzystam z rozwiązania Web Fonts, a dokładniej z @font-facehttp://www.w3.org/TR/css3-fonts/#the-font-face-rule.

Zalety @font-face

  • Nie wymaga żadnych pluginów do przeglądarki typu Flash Player.
  • Kompatybilny z najpopularniejszymi przeglądarkami – w tym i z IE6+.
  • Wymagany tylko plik CSS.
  • Przyjazny SEO.
  • Łatwa implementacja.
  • Istnieje możliwość używania wielu różnych niestandardowych czcionek.

Jak przy użyciu @font-face skorzystać z niestandardowych czcionek ? Poniższy kod działa w większości przeglądarek (Firefox 3.0+, Opera 10+. Safari 3+, IE6+).

@font-face {
font-family: 'Niestandardowy font czcionki';
src: url(Niestandardowy_fon_czcionki.eot);
src: local('Niestandardowy font czcionki'), url(Niestandardowy_font_czcionki.ttf) format("truetype")
}

Następnie w kodzie wystarczy użyć czcionki o nazwie jaką zdefiniowaliśmy w font-family np.

h1{
 font-family: Niestandardowy font czcionki, Arial, Sans-serif
}

local – sprawdza najpierw czy użytkownik posiada zainstalowaną czcionkę.
Internet Explorer nie obsługuje plików ttf, tylko eot (czyt. Embedded OpenType). Do przekonwertowania pliku z .ttf na .eot można użyć programu ttf2eot lub z WEFT.

3. Typeface

Zalety Typeface

  • Nie wymaga żadnych pluginów do przeglądarki typu Flash Player.
  • Łatwa implementacja.
  • Można zaznaczyć tekst.

Wady Typeface

  • Brak obsługi wielu niestandardowych czcionek na raz.
  • Brak :hover, :focus, itp.
  • Duży rozmiar pliku JavaScript z czcionką.
  • Użycie Typeface w treści spowoduje znaczne spowolnienie strony.
  • Nie działa na Operze. Przynajmniej u mnie nie działa :)

Implementacja Typeface. Kod dodajmy w sekcji head

<script src="typeface.js"></script>
<script src="niestandardowy_font_czcionki.typeface.js"></script>

4. sIFR

sIFR (czyt. Scalable Inman Flash Replacement) jest to metoda, która opiera się na generowaniu czcionek przy użyciu Flash. Natomiast implementowanie wygenerowanych czcionek odbywa się przy użyciu JavaScript.

Zalety sIFR

  • Można zaznaczyć tekst.
  • Istnieje możliwość używania wielu różnych niestandardowych czcionek.
  • Mało ważące poliki z czcionką i JS.

Wady sIFR

  • Skomplikowana implementacja.
  • Spowalnia wczytywanie się strony.
  • Wymaga obsługi JavaScript oraz Flash.

Implementacja sIFR.

<script src="sifr.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Replacement calls. Please see documentation for more information. */
 
if(typeof sIFR == "function"){
 
// This is the preferred "named argument" syntax
        sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"vandenkeere.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20, nPaddingBottom:20, sFlashVars:"textalign=center&offsetTop=6"}));
 
// This is the older, ordered syntax
        sIFR.replaceElement("h5#pullquote", "vandenkeere.swf", "#000000", "#000000", "#FFFFFF", "#FFFFFF", 0, 0, 0, 0);
        sIFR.replaceElement("h2", "tradegothic.swf", "#000000", null, null, null, 0, 0, 0, 0);
        sIFR.replaceElement("h4.subhead", "tradegothic.swf", "#660000", null, null, null, 0, 0, 0, 0);
        sIFR.replaceElement("h3.sidebox","tradegothic.swf","#000000", "#000000", "#DCDCDC", "#DCDCDC", 0, 0, 0, 0, null);
        sIFR.replaceElement("h3", "tradegothic.swf", "#000000", null, null, null, 0, 0, 0, 0, null);
 
};
 
//]]>
</script>

4. Google Web Fonts

Możemy też korzystać z niestandardowych czcionek za pomocą Google Web Fonts. Wystarczy wybrać interesującą czcionkę i ją zaimplementować na naszej stronie.

Implementacja Google Web Fonts. Kod dodajmy w sekcji head

<link href='http://fonts.googleapis.com/css?family=niestandardowy_font_czcionki' rel='stylesheet' type='text/css'>

Potem wystarczy zaimportować czcionkę przez CSS:

@import url(http://fonts.googleapis.com/css?family=niestandardowy_font_czcionki);

WAŻNE

1. Trzeba pamiętać o sprawdzeniu licencji czcionki. Wiele czcionek, które są udostępnianie nie pozwala na ich dystrybucję pod żadną postacią.
2. Zwróć uwagę na to, czy dany font obsługuje polskie znaki diakrytyczne.

VN:F [1.9.7_1111]
Głosy: +6 (Głosy na Tak: 6, Głosy na Nie: 0, Wszystkich głosów: 6)
Kategoria: CSS, Webmaster
Tagi: ,

Na czym zarabiam ?

2 odpowiedzi na „Niestandardowe czcionki na stronie WWW

  1. Dodatkową wadą Cufona jest to, że w smartfonach polskie znaki nie są wyświetlane. Nie wiem czy we wszystkich, ale na pewno w HTC.
    Mam jedną skórkę WordPressa gdzie korzystam z Cufona i kilka skarg od użytkowników.

    VA:F [1.9.7_1111]
    Głosy: +1 (Tak: 1, Nie: 0)
  2. Dzięki za wartościowy komentarz. Ja nie miałem okazji testowania niestandardowych czcionek na telefonach komórkowych.

    VN:F [1.9.7_1111]
    Głosy: 0 (Tak: 0, Nie: 0)