witia.jogger.pl

Poniższy tekst jest tłumaczeniem artykułu "Beautiful fonts with @font-face", zamieszczonego na stronie hacks.mozilla.org na licencji Creative Commons Attribution 3.0 United States License. Autorem tekstu jest John Daggett. Spis wszystkich tłumaczeń artykułów z hacks.mozilla.org dostępny jest na stronach wiki.aviary.pl.

Firefox 3.0 poprawił wyświetlanie typografii poprzez dodanie wsparcia dla kerningu, ligatur oraz zróżnicowanych wag czcionek równocześnie ze wsparciem kompleksowych skryptów renderujących. Autorzy stron są jednak ciągle ograniczeni do używania w swoich projektach powszechnie dostępnych czcionek. Firefox 3.5 usuwa te ograniczenia wprowadzając wsparcie dla reguły CSS @font-face, która jest metodą linkowania czcionek TrueType i OpenType, tak jak obecnie linkuje się kod i obrazki. Safari wspiera ten rodzaj linkowania czcionek od wersji 3.1, zaś Opera zapowiada wprowadzenie obsługi tej funkcji w Operze 10.

Użycie @font-face do linkowania czcionek jest stosunkowo proste. W arkuszu stylów każda reguła @font-face definiuje nazwę rodziny czcionek do użycia, zasób, z którego ma być pobrana oraz charakterystykę stylu danego kroju jak pogrubienie czy pochylenie. Firefox 3.5 pobiera czcionkę tylko wtedy, kiedy jest to potrzebne, zatem arkusz stylów może zawierać pełną listę czcionek, z których wybranych zostanie tylko kilka aktualnie używanych.

/* Graublau Sans Web (www.fonts.info) */
 
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
 
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif; 
}

Przeglądarki wspierające @font-face wyświetlą tekst przy użyciu czcionki Graublau Sans Web, zaś starsze przeglądarki do wyświetlania tekstu zastosują czcionkę Lucida Grande lub domyślną czcionkę bezszeryfową. Przykład jest tutaj:

Szczegóły

Większość rodzin czcionek zawiera obecnie tylko cztery odmiany: normalną, pogrubioną, pochyloną oraz pogrubioną pochyloną. Do definiowania każdej z tych odmian używane są instrukcje font-weight oraz font-style. Definiują one styl czcionki, nie ma tutaj informacji o kaskadowości lub dziedziczeniu. Gdy własności nie są wprost zdefiniowane, przyjmują wartość ‘normal’:

/* Gentium by SIL International   */
/* http://scripts.sil.org/gentium */
 
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf);
  /* font-weight, font-style ==> default to normal */
}
 
@font-face {
  font-family: Gentium;
  src: url(GentiumItalic.ttf);
  font-style: italic;
}
 
body { font-family: Gentium, Times New Roman, serif; }

Przykładowy tekst poniżej wyświetlony jest przy użyciu tej rodziny czcionek:

Cechą, którą łatwo przeoczyć, jest to, że @font-face pozwala tworzyć rodziny z więcej niż tylko normalnym i pogrubionym stylem - dla pojedynczej rodziny można zdefiniować do dziewięciu wag czcionek. W systemie Windows ograniczenia platformy zmiejszają zwykle wybór rodzin czcionek tylko do wagi normalnej i pogrubionej. Czcionki, takie jak japoński projekt open source M+ Fonts, mają aż siedem wag. Część z nich użyta jest na przykładzie poniżej:

W niektórych sytuacjach autorzy mogą preferować używanie czcionek dostępnych lokalnie, zaś pobierać czcionki tylko wtedy, kiedy odpowiednie kroje nie są dostępne. Jest to możliwe poprzez podanie local() w definicji src reguły @font-face. Przeglądarka będzie sprawdzała listę czcionek podanych w src, aż załaduje pomyślnie którąś z nich.

/* MgOpen Moderna                      */
/* http://www.zvr.gr/typo/mgopen/index */

 
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue"), 
       local("HelveticaNeue"), 
       url(MgOpenModernaRegular.ttf);
}
 
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), 
       local("HelveticaNeue-Bold"), 
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
 
body { font-family: MyHelvetica, sans-serif; }

Zrzut ekranu poniżej pokazuje (od góry do dołu) rezultaty na systemach Mac OS X, Windows i Linux prostego testu, który używa rodziny czcionek zdefiniowanej powyżej:

Rodzina czcionek Helvetica Neue jest dostępna na większości systemów Mac OS X, ale generalnie nie ma jej na komputerach z system Windows lub Linux. Gdy przykład jest wyświetlany na Mac OS X, używana jest lokalna czcionka Helvetica Neue i żadna czcionka nie jest ładowana. Pod Windowsem i Linuksem próba załadowania lokalnej czcionki nie udaje się i w zamian pobierany jest odpowiednik - czcionka MgOpen Moderna. MgOpen Moderna jest zaprojektowana jako zamiennik czcionki Helvetica, więc daje efekt podobny do Helvetica Neue. W ten sposób autor może zapewnić odpowiedni wygląd tekstu, przy tym uniknąć ładowania czcionki, jeśli nie jest to konieczne.

Nazwa użyta do przypisania konkretnej czcionki jest pełną nazwą pojedynczej czcionki. Zwykle jest to nazwa czcionki wraz z określeniem jej stylu (np. “Helvetica Bold”). W systemie Mac OS X nazwa jest podana w panelu informacyjnym danej czcionki. Należy wybrać styl, a następnie polecenie ‘Show Font Info’ z menu Preview w FontBook:

Podobne narzędzia istnieją pod Linuksem. W Windows można użyć narzędzia font properties extension, darmowego programu Microsoftu, który pokazuje te nazwy. Kiedy rozszerzenie jest zainstalowane, panel właściwości pokazuje informacje o poszczególnych czcionkach. Pełna nazwa jest podana w polu “Font Name” w panelu Names:

Safari wspiera tylko wyszukiwanie nazw PostScript pod Mac OS X, więc w tym systemie operacyjnym są również wspieranie te nazwy. Dla czcionek OpenType PS (często oznaczonych rozszerzeniem .otf) pełna nazwa jest taka sama, jak nazwa PostScript pod Windowsem. Zatem dla tych czcionek autorzy powinny podawać zarówno pełną nazwę, jak i nazwę PostScript, by uzyskać międzyplatformową interoperacyjność.

Wsparcie wielu języków

Wiele języków cierpi na niedostatek powszechnie dostępnych czcionek. Dla rzadkich języków i starych pism możliwości wyboru często zmniejszają się do jedynie niewielkiej liczby. Zastosowanie @font-face pozwala autorom, używającym tych języków, naprawić ten problem poprzez włączenie czcionek na swoją stronę.

@font-face {

  font-family: Scheherazade;
  src: url(fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"), 
       url(fonts/ScheherazadeRegOT.ttf) format("opentype");

}
 
body { font-family: Scheherazade, serif; }

W językach takich jak arabski znaki mogą mieć różny kształt, gdyż na sposób wyświetlania danego znaku wpływają znaki go otaczające. Różne systemy wspierają różne technologie renderowania w celu uzyskania kształtu tekstu; pod Mac OS X wymagane są czcionki AAT, podczas gdy pod Windowsem i Linuksem wymagane są czcionki OpenType. Bez czcionek w formacie wymaganym przez dany system kształt tekstu nie będzie wyświetlany prawidłowo.

W systemie Mac OS X ładowania jest wersja AAT czcionki. W Windows i Linuksie, które nie wspierają wyświetlania przy użyciu czcionek AAT, ładowanie czcionek AAT jest pomijane, a zamiast nich użyte są czcionki OpenType. Dzięki temu tekst jest wyświetlany poprawnie we wszystkich systemach.

Używanie czcionek na wielu stronach

Firefox 3.5 domyślnie pozwala na ładowanie czcionek dla stron pochodzących z jednej witryny. Zapobiega to swobodnemu wykorzystywaniu czcionek znalezionych na innych stronach. W przypadku witryn, które chcą jawnie zezwolić na wykorzystywanie czcionek na innych stronach, Firefox 3.5 wpiera użycie nagłówków kontroli dostępu w celu kontroli nad tą opcją. Poprzez umieszczenie dodatkowego nagłówka w nagłówkach HTTP, wysyłanego razem z plikami czcionek, strona może udostępnić czcionki dla innych witryn.

# Przykładowy plik .htaccess Apache'a dodający nagłówek kontroli dostępu
 
<FilesMatch "\.(ttf|otf)$">

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Przy włączonym powyższym nagłówku każda strona może mieć dostęp do czcionek na tej witrynie, nie tylko strony wchodzące w skład tej samej witryny.

Problemy licencjonowania czcionek

Gdy używa się czcionek na stronie, ważne jest, by zawsze upewnić się, czy licencja czcionki dopuszcza jej użycie w sieci. Jeśli umowa licencyjna jest wypełniona niejasnym żargonem prawniczym, nie obawiaj się nadmiaru ostrożności i ustal to z dostawcą czcionki przed użyciem jej na stronie. Jeśli licencja dopuszcza użycie, dobrym pomysłem jest dodanie komentarza przy regułach @font-face wskazującego licencję - dla przyszłych zastosowań.

“Znalazłem darmową czcionkę. Czy mogę wykorzystać ją na mojej stronie?”

Czasami tak, czasami nie. Część darmowych czcionek jest dystrybuowana jako zapowiedź produktu do sprzedaży i nie dopuszcza redystrybucji ani umieszczania na serwerze internetowym. Należy sprawdzać licencję również dla darmowych czcionek.

“Chcę użyć [wstaw tutaj nazwę ulubionej czcionki] na mojej stronie. Czy to możliwe?”

W tej chwili raczej nie. Używanie w sieci linkowanych czcionek jest jeszcze w stadium początkowym. Większość czcionek, które są obecnie dostarczane z zamkniętymi systemami operacyjnymi, ma licencje ograniczające użycie do standardowych aplikacji desktopowych, zatem umieszczanie tych czcionek na serwerze internetowym jest prawie na pewno niedozwolone. Piractwo było w przeszłości plagą branży zajmującej się czcionkami, zatem większość dostawców czcionek obawia się zezwalać na używanie ich czcionek poza stosunkowo ograniczonym kontekstem. Wielu dostawców czcionek skupia się na potrzebach przemysłu wydawniczego i względna złożoność umów licencyjnych często to odzwierciedla. W przyszłości część projektantów czcionek może dojść do wniosku, że korzyści ze sprzedaży czcionek jako czcionek sieciowych przeważą nad potencjalnymi stratami wskutek piractwa, część może jednak nie zdecydować się na taki krok. Ich umowy licencyjne będą odzwierciedlały ten wybór i należy go respektować.

Rynek sprzedaży fotografii jest często opisywany jako rynek o wartości 2 miliardów dolarów, lecz rynek czcionek sieciowych jest jeszcze rynkiem o wartości zero dolarów, zatem może tylko iść w górę!

Linkowanie czcionek w Internet Explorerze

Linkowanie czcionek w Internet Explorerze jest możliwe, jednak tylko dla czcionek w zamkniętym formacie EOT. Jedynym sposobem na stworzenie czcionek EOT jest zastosowanie narzędzia Microsoft WEFT, dostępnego jedynie w systemie Windows. Do formatu EOT mogą być konwertowane jedynie czcionki TrueType i OpenType TT, czcionki OpenType PS (.otf) nie mogą zostać użyte.

Internet Explorer rozpoznaje jedynie instrukcje font-family i src w regułach @font-face, zatem każda rodzina może zawierać tylko pojedynczy krój. Nie rozpoznaje informacji format() i zignoruje każdą regułę @font-face zawierającą takie wskazówki. To zachowanie może być użyte do międzyplatformowego linkowania czcionek:

/* Definicja czcionki Internet Explorera */
/*        (*musi* być pierwsza)          */
@font-face {
  font-family: Gentium;
  src: url(Gentium.eot) /* nie może zawierać format() */;
}
 
/* Definicja czcionki dla innych przeglądarek */
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf) format("opentype");

}

Przyszłość

W Firefoksie 3.5 nie są obsługiwane instrukcje font-stretch oraz unicode-range. Czcionki definiowane w dokumentach SVG również nie są jeszcze wspierane. Rozważane jest ich wprowadzenie w przyszłych wydaniach. Jak zwykle mile widziane są łatki!

Dodatkowe informacje

Dokumentacja

• MDC @font-face documentation
• CSS2 Fonts specification
• CSS3 Fonts draft
• Cross-Origin Resource Sharing Working Draft

Przykłady

• CSS @ Ten: The Next Big Thing
• Example layout using Graublau Sans
• Examples of Interesting Web Typography
• The Elements of Typographic Style Applied to the Web

Czcionki

• Font Squirrel
• 10 Great Free Fonts for @font-face
• Web-based font subsetting tool
• 40 Excellent Free Fonts by Smashing Magazine
• FontTools/TTX - Python scripts for displaying font data

Polityka czcionek

• Microsoft’s Bill Hill about Font Embedding
• Microsoft’s Chris Wilson about direct linking to TrueType fonts
• Robert O’Callahan’s blog post on web font formats
• Discussion of font formats at W3C TPAC meeting
• Mark Pilgrim’s post critical of font foundries
• David Baron’s thoughts about downloadable font formats

4 komentarze