Niestandardowe czcionki – zmora web developera - lukasz

Plik pobrano z www.lukasz-socha.pl
Tytuł: Niestandardowe czcionki – zmora web developera
Ostatnia aktualizacja:24.09.2011
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","#00000
0", "#000000", "#DCDCDC", "#DCDCDC", 0, 0, 0, 0, null);
sIFR.replaceElement("h3", "tradegothic.swf", "#000000",
Materiał przeznaczony tylko do własnego użytku. Publikacja na innych stronach wyłącznie za zgodą autora.
[email protected]
1/2
Plik pobrano z www.lukasz-socha.pl
Tytuł: Niestandardowe czcionki – zmora web developera
Ostatnia aktualizacja:24.09.2011
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.
Materiał przeznaczony tylko do własnego użytku. Publikacja na innych stronach wyłącznie za zgodą autora.
[email protected]
2/2