Szsz.pl

Trochę historii

Możliwość określenia kroju pisma w html pojawiła się po raz pierwszy w 1995 roku, w przeglądarce Netscape, wraz z niesławnym tagiem font. To, często nadużywane, rozwiązanie miało jedną generalną wadę: wybór ograniczał się do fontów zainstalowanych na komputerze odbiorcy.

W 1998 roku Netscape i Microsoft zaproponowały dwa różne rozwiązania tego problemu. Niestety żadne z nich nie miało szans na zdobycie popularności. Przyczyną były ograniczenia licencyjne, oraz skomplikowane mechanizmy zabezpieczeń mające je narzucać.

W efekcie twórcy stron na 10 lat utknęli przy trzech podstawowoych krojach pisma, za jedyną alternatywę mając zmuszanie wszystkich by instalowali te same fonty.

@font-face

Czasy się zmieniły. Obecnie w Internecie dostępnych jest sporo dobrych fontów, których licencja pozwala na swobodną redystrybucję. W efekcie, od niedawna, przeglądarki umożliwiają powiązanie fontu Open-Type, oraz True-Type z dokumentem.

Aby skorzystać z tej możliwości wystarczy prosta deklaracja:

@font-face {
 font-family: 'Silesiana';
 src:  url(silesiana.otf);
} 

Użyta tu składnia CSS wywodzi sie z przeglądarki Internet Explorer 4. Na tym jednak kończą się analogie.

• Preferowanymi formatami są Open-Type i True-Type.
• Można określić odrębne pliki dla pisma pochyłego i pogrubionego itp.
• Używając słowa local, można uniknąć sciągania fontów zainstalowanych w systemie.

Oto kolejny, nieco bardziej rozbudowany przykład, wykorzystujący rozszerzoną składnię:

@font-face {
 font-family: 'AntykwaPoltawskiego';
 src:  local(AntykwaPoltawskiegoTTF), 
   url(antpr.ttf);
}
@font-face {
 font-family: 'AntykwaPoltawskiego';
 font-style: italic;
 src:  local(AntykwaPoltawskiegoTTF-Italic),
   url(antpri.ttf);
}
@font-face {
 font-family: 'AntykwaPoltawskiego';
 font-weight: bold;
 src:  local(AntykwaPoltawskiegoTTF-Bold),
   url(antpb.ttf);
}
@font-face {
 font-family: 'AntykwaPoltawskiego';
 font-weight: bold;
 font-style: italic;
 src:  local(AntykwaPoltawskiegoTTF-BoldItalic),
   url(antpbi.ttf);
}

Mając zdefiniowane fonty, można z nich korzystać tak samo jak z tych zainstalowanych w systemie.

h4     { 
 font-family: 'Silesiana', Serif;
}
h5, p  {
 font-family: 'AntykwaPoltawskiego', Serif;
}

Same Origin Policy

Niestety, nie ma róży bez kolców..

Pozostałością ograniczeń wprowadzanych w dawnych czasach, jest zasada Same Origin Policy, która dotyczy fontów.

Wydaje się to trochę dziwne. Zważywszy na to że wszystkie materiały dostępne w Internecie są chronione prawem autorskim, trudno zrozumieć czemu akurat to medium zostało potraktowane w tak szczególny sposób.

Niestety w przypadku serwisów gdzie pliki statyczne są w sposób jawny przechowywane na odrębnych serwerach, wspomniane ograniczenie może utrudnać lub wręcz uniemożliwić załączanie zewnętrznych fontów.

Na szczęście, podobnie jak w przypadku XMLHttpRequest istnieje obejście tego ograniczenia. W tym celu serwer udostępniający fonty powinien w nagłówku HTTP przesłać informację dla jakiej domeny są one przeznaczone.

Access-Control-Allow-Origin: blog.szsz.pl

Dopuszczalne jest określenie (rozdzielanej przecinkami) listy domen, lub wpisanie symbolu *, jeżeli nie chcemy w żaden sposób ograniczać dostępu do fontu.

Nie będę tu opisywał dokładniej jak zaimplementować coś takiego, ponieważ jest to ściśle zależne od serwera, tym bardziej że nie powinno to sprawić trudności osobom które znają przynajmniej podstawy protokołu HTTP.

Podsumowując

Możliwość nadania witrynie indywidualnej formy, poprzez określenie kroju pisma jest bardzo atrakcyjna. Większość ozdobnych fontów jest w rzeczywistości bardzo niewielka (40k–80k), niekiedy mniejsza od załączanych grafik. Oznacza to że wykorzystanie ich w celu poprawy formy wizualnej w miejsce licznych grafik może wiązać się z oszczędnością miejsca i czasu potrzebnego do wyświetlenia strony.

Oczywiście zapewne pojawi się wiele stron, które będą nadużywały tej możliwości, tak jak to było z tagiem font i animowanymi gifami, ale wydaje się że jest to tego warte.