Niestandardowe czcionki jako grafika

Jak już wspomniałem we wstępie, umieszczanie „graficznych tekstów” nie jest najlepszym rozwiązaniem, po pierwsze ze względu na pozycjonowanie. Dla Google bardzo ważna jest treść na naszej stronie, a w przypadku takiego podejścia nie będzie ona odczytana. Dodatkowo utrudnione będzie wprowadzanie zmian na stronie, gdyż za każdym razem będziemy musieli generować na nowo grafiki i wstawiać je na stronie. Podobne problemy może sprawiać strona przygotowana we Flashu.

Aby to zautomatyzować, możemy wykorzystać bibliotekę JavaScript Cufon. Generuje ona sama potrzebne grafiki do wprowadzonych przez nas tekstów, jednak pozostanie drugi z problemów – odczytanie ich przez wyszukiwarki internetowe.

Jeśli w graficzny sposób tworzymy tylko niewielkie części strony, menu lub nagłówek, nie będzie to problem. Co jednak zrobić w przypadku normalnych tekstów?

Wstawianie czcionek przez @font-face

Istnieje bardzo proste rozwiązanie powyższych problemów. W CSS możemy dodawać własne, niestandardowe czcionki przy pomocy @font-face. Pewną niedogodnością jest to, że poszczególne przeglądarki internetowe wykorzystują różne standardy (EOT, SVG,  WOFF, TTF). Możemy jednak w jednej definicji zawrzeć różne warianty, dzięki czemu w praktycznie w każdej wygląd będzie taki, jak zamierzaliśmy (nawet w Internet Explorer 6).

Najprościej stworzyć wymagane definicje za pośrednictwem serwisu Font Squirrel. Możemy tam wybrać z całkiem pokaźnego zbioru interesującą nas czcionkę i pobrać paczkę zawierającą pliki źródłowe w różnych formatach oraz wymagany kod CSS.

Jeśli nie znajdziemy w zasobach serwisu interesującego fonta, możemy stworzyć własną definicję. Trzeba w tym celu posiadać plik TTF, z którego dostępny generator utworzy dla nas indywidualną paczkę z definicją czcionki.

Gdy posiadamy już definicję wybranej przez nasz czcionki w plikach EOT, SVG,  WOFF oraz TTF należy je wgrać na serwer, a następnie określić nową czcionkę w CSS podając odpowiednie ścieżki:

@font-face {
font-family: 'KingthingsSpikelessRegular';
src: url('Kingthings_Spikeless-webfont.eot');
src: url('Kingthings_Spikeless-webfont.eot?#iefix') format('embedded-opentype'),
url('Kingthings_Spikeless-webfont.woff') format('woff'),
url('Kingthings_Spikeless-webfont.ttf') format('truetype'),
url('Kingthings_Spikeless-webfont.svg#KingthingsSpikelessRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Następnie wystarczy tak zdefiniowaną czcionkę przypisać standardowo do odpowiedniego obiektu poprzez font-family:

p {font-family: KingthingsSpikelessRegular, Arial, sans-serif}

Niestandardowe czcionki z Google Web Fonts

Jeśli nie chcemy sami przygotowywać definicji czcionek i wgrywać ich na nasz serwer, możemy skorzystać z usługi Google Web Fonts. Po wyborze interesującej nas czcionki możemy ją dodać na trzy różne sposoby:

• standardowe dołączenie dokumentu CSS

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

• polecenie @import w CSS

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

• kod Java Script

Usługa Google sama rozpozna z jakiej przeglądarki korzystamy i prześle jej odpowiednie definicje. Szybkość działania jest bardzo dobra, czcionki pojawiają się w wybranym formacie praktycznie od razu.

Dzięki różnym upodobaniom użytkowników musimy mieć więc zainstalowanych w systemie kilka przeglądarek internetowych. Tylko wtedy stestujemy dobrze wygląd tworzonego serwisu WWW. Jeśli chodzi o Internet Explorer, możemy sobie pomóc świetną aplikacją o nazwie IE Tester.

Dzięki niej mamy możliwość wyświetlenia strony w wielu wersjach przeglądarki, tj. IE 5.5, 6, 7, 8 oraz 9 (w momencie pisania tego artykułu). Wyświetlenie strony w ostatniej wersji IE jest możliwe tylko pod Windows 7 z zainstalowaną w systemie wersją tej przeglądarki. Program można pobrać ze strony http://www.my-debugbar.com

W tym tekście zamierzam się zająć ostatnim z tych elementów, czyli elementami graficznymi naszego serwisu. Każdy wie, że nie powinno ich być za dużo, oraz  że powinny mieć jak najmniejszy rozmiar. Istnieje także sposób na zmniejszenie liczby odwołań do nich.

Wystarczy w tym celu skorzystać z dobrodziejstw Data URI, czyli możliwości przechowywania obrazka w postaci binarnej, zakodowanej przy pomocy base64,  bezpośrednio w dokumencie CSS.  Dzięki temu zmniejszamy ilość odwołań HTTP, wielkość pliku CSS możemy natomiast zmniejszyć poprzez kompresję. Wystarczy skorzystać z gzipa, dane zapisane w base64 kompresują się bardzo dobrze.

Przykładowy kod dodający obrazek, może wyglądać w następujący sposób:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAA
AAMAgMAAAArG7R0AAAADFBMVEX/////mQD/ZgDMMwAfZILpAAAAJUlEQVQImWNgAALW
0BAGqVWrIVgDiLu0GaQWdUNojdVwOf7/fwACPA009gxCxwAAAABJRU5ErkJggg=="
alt="My image" />

Definicja elementu listy w CSS może natomiatst wyglądać tak:

ul li { margin-left: 20px; background: url(' data:image/png;
base64,iVBORw0KGgoAAAANSUhEUgAAAAwAA AAMAgMAAAArG7R0AAAADFBMVEX//
///mQD/ZgDMMwAfZILpAAAAJUlEQVQImWNgAALW0BAGqVWrIVgDiLu0GaQWdUNojd
VwOf7/fwACPA009gxCxwAAAABJRU5ErkJggg==') top left no-repeat;}

Aby zakodować obrazek pod systemami linuksowymi, wystarczy skorzystać z polecania base64. Innym sposobem może być skorzystanie z darmowego konwertera.

Jeśli korzystamy z PHP, możemy wygenerować potrzeby kod przy użyciu poniższej funkcji:

<?php
function data_uri($file, $mime)
{
 $contents = file_get_contents($file);
 $base64   = base64_encode($contents);
 return ('data:' . $mime . ';base64,' . $base64);
}
?>

A nastepnie wykorzystać go na naszej stronie:

<img src="<?php echo data_uri('image.png','image/png');?>" alt="My image" />

Niestety, nie ma róży bez kolców. Mimo ogromnych zalet jakie stwarza Data URI, napotkamy na ogromny problem związany z przeglądarkami. IE potrafi wyświetlać zakodowane w ten sposób obrazki od wersji 8, o ile nie przekraczają one 32 KB. Starsze wersje przeglądarki Microsoftu w ogóle nie obsługują tej technologii.

Jeśli jednak optymalizujemy serwis będący pod dużym obciążeniem, warto skorzystać z tego mechanizmu dla użytkowników używających przeglądarek, które go wspierają.