Niestandardowe czcionki – zmora web developera

Kodując różnego rodzaju projekty graficzne zazwyczaj największym problemem są czcionki. Mimo że, programy typu Adobe Photoshop wyświetlają ich parametry, to i tak trudno ustawić je tak samo za pomocą CSS. Zwykle robi się to „na oko”. Pół biedy gdy używane są standardowe fonty, ale prawie zawsze kochani graficy korzystają z tych niestandardowych… i co wtedy? I tu zaczyna się problem. Mimo już ponad 20-letniej historii stron www ciągle nie opracowano jednolitego standardu…

Tekst jako obrazek

Najprostszym sposobem jest zapis tekstu do jpg czy gif i wstawienie go za pomocą znacznika img. Rozwiązanie to nie nadaje się w sytuacjach, gdy tekst często zmienia się – ja osobiście używam img zazwyczaj do nagłówków. Niestety ma jedną, zasadniczą wadę – nie jest wygodne dla użytkowników (brak możliwości zaznaczania tekstu) oraz nie jest SEO friendly.

Użycie PHP, JS i Flash

Inną znaną techniką jest sIFR, która zamienia tekst dokumentu HTML w obiekty flash. Metoda ta umożliwia łatwą zmianę treści – pliki .swf generowane są dynamiczne. Niestety spowalnia ładowanie strony dość mocno i nie jest łatwe w użyciu:

<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>

Do dynamicznego generowania obrazków z tekstem można także użyć skryptów napisanych w PHP. Jednakże obciąża to dodatkowo serwer i jest nieefektywne przy większych serwisach.

Web fonts

Chyba najbardziej popularnym rozwiązaniem problemu niestandardowych czcionek jest użycie reguły CSS @font-face:

@font-face {
  font-family: 'czcionka';
  src: url('fonts/czcionka.eot');
  src: url('fonts/czcionka.ttf');
}

Banalne w użyciu, prawda? Niestety byłoby zbyt pięknie…

Największym problemem jest Microsoft, który wykorzystuje w Internet Explorerze autorskie rozszerzenie .eot. Do niedawna było ono zamkniętym formatem przez co ciężko było o czcionkę w tym rozszerzeniu. Ponadto .eot koduje zasady licencji, co często uniemożliwia konwertowanie fontów z otwartych formatów.

Na szczęście, z pomocą przychodzą serwisy takie jak Font Squirrel. Strona ta zawiera wiele niestanowionych czcionek. Co więcej, daje możliwość pobrania wybranego fonta we wszystkich formatach wraz z wygenerowanym plikiem CSS. Podobną usługę świadczy Google Web Fonts.

Podsumowanie

Niestety, nadal nie istnieje jednolity standard użycia niestandardowych czcionek. Kodując projekt graficzny, web developer sam musi określić jaka technika będzie najskuteczniejsza w danym serwisie. Miejmy nadzieję, że ta niekorzystna sytuacja ulegnie wkrótce poprawie.