Niestandardowe czcionki na stronie WWW

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-face – https://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='https://fonts.googleapis.com/css?family=niestandardowy_font_czcionki' rel='stylesheet' type='text/css'>

Potem wystarczy zaimportować czcionkę przez CSS:

@import url(https://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.

(+7, Głosów: 7)

Loading...