WEFT - zagnieżdżanie czcionek

[ artykuł opiera się na pracy Steve'a Muldera "Embedding Fonts Tutorial" ]

Jak wiadomo, czcionki zdefiniowane przez webmastera są w trakcie wczytywania strony pobierane z systemu operacyjnego czytelnika. Dlatego trzeba je definiować tak, aby mieć pewność, że zobaczy on je poprawnie. Stąd też zwykle musimy się ograniczać do najbardziej typowych czcionek, jak np. Arial, Verdana, Times czy Courier w środowisku Windows.

Istnieją jednak specjalne techniki zagnieżdżania nietypowych czcionek - wymaga to od czytelnika posiadania przeglądarki, która takie techniki interpretuje. Internet Explorer ma na przykład wbudowaną interpretację czcionek Embedded Open Type.

Nie jest możliwe bezpośrednie zagnieżdżanie czcionek Type 1, TrueType czy OpenType w ich natywnym formacie. Konieczne jest przekonwertowanie ich do specjalnego formatu:

Embedded OpenType (plik .eot) — zaprojektowany przez Microsoft

TrueDoc (plik .pfr) — zaprojektowany przez firmy Netscape i Bitstream

Poniższa tabela prezentuje w skrócie obsługę obu typów.


Zagnieżdżony format


Formaty czcionek

Obsługa


Embedded OpenType

TrueType,
OpenType


Internet Explorer 4
lub wyższy


TrueDoc

TrueType,
PostScript Type 1


Navigator 4.03 lub wyższy,
Internet Explorer 4 lub wyższy (tylko Windows, wymagana jest wtyczka)

Żródło: Steve Mulder, Embedding fonts tutorial.

Narzędzia do tworzenia plików .pfr są komercyjne, natomiast pliki .eot można tworzyć za pomocą darmowego narzędzia Web Embedding Fonts Tool (http://www.microsoft.com/typography/default.asp). Jest ono właśnie przedmiotem opisu.

Pamiętajmy jednak, że WEFT jest ciągle narzędziem w stadium beta, niekiedy zachowującym się dość chimerycznie i generującym błędy.

Warto od razu wskazać na następujące sprawy:

Web Embedding Fonts Tool (WEFT) jest to darmowe narzędzie Microsoftu, pracujące tylko w środowisku Windows. Po zainstalowaniu i uruchomieniu WEFT skanuje system i tworzy bazę dostępnych czcionek.

 

Aby zagnieździć czcionki na stronie, konieczne jest wykonanie dwóch podstawowych kroków:

Krok 1: utworzenie definicji czcionek na stronie

Czcionki możemy oczywiście definiować w znany nam już sposób, a więc albo za pomocą przykładowego polecenia
<font face="Berling Antigua">tekst</font>
albo za pomocą stylów, czyli polecenia font-family, np.
<p style="font-family: "Berling Antigua">tekst</p>.
Ze względu na ograniczenia Macintoshy zalecane jest raczej używanie stylów.

Krok 2: wygenerowanie czcionek

WEFT startuje w trybie kreatora. Jeśli zrezygnujemy z jego usług, zawsze możemy go ponownie uruchomić za pomocą menu: Tools - Run Wizard.

WEFT wymaga jeszcze podania osobistych danych:

Na kolejnym ekranie musimy podać adres strony HTML. Jeśli testujemy ją lokalnie, wybieramy protokół file:// i szukamy pliku na dysku.

Kliknięcie na Add informuje WEFT o tym, że zagnieżdżamy czcionkę w danym dokumencie. WEFT automatycznie dodaje też znajdujące się w dokumencie odsyłacze do innych stron. Zaznaczenie Do not add linked pages zabrania tej operacji.

Przycisk Dalej przenosi nas do następnej czynności - analizowania strony.

WEFT przystępuje do zanalizowania strony, szukając zdefiniowanych w dokumencie czcionek (także domyślnych dla niektórych poleceń HTML). Może to potrwać kilka chwil, zależnie od liczby stron i ich skomplikowania. Po zanalizowaniu pokazuje się lista czcionek.

Ikony obok czcionek sygnalizują następujące sytuacje:

— Czcionka może być zagnieżdżona (jest to prawnie dozwolone).
— Czcionka nie może być zagnieżdżona z przyczyn prawnych lub z powodu błędu.
— Czcionka wchodzi w skład zestawu Windows core fonts i nie musi być zagnieżdżana.

Ta ostatnia informacja nie jest do końca pewna - nie wszystkie fonty z tego zestawu są dostępne w systemach użytkowników.

Kolumna Chars wskazuje liczbę znaków wyświetlanych za pomocą danej czcionki, według definicji z dokumentu HTML.

Przycisk Details, po zaznaczeniu czcionki, pokazuje wygląd czcionki w systemowej przeglądarce czcionek.

Czcionki, których nie trzeba zagnieżdżać (np. Times New Roman) można wyeliminować, zaznaczając je i klikając Dont' embed. Przycisk Add pozwala dodać jeszcze inne czcionki z wyświetlonej na żądanie listy.

Istotny jest wybór Subsetting, gdyż decyduje on o wielkości plików z czcionkami. Domyślnie WEFT zagnieżdża tylko znaki użyte w dokumentach, a nie cały font (opcja 3).

Wybór dotyczy wszystkich zagnieżdżanych czcionek, ale można też wybrać podzbiór indywidualnie dla poszczególnych czcionek, klikając Subset.

Kolejny ekran pozwala wskazać docelowe położenie pliku .eot. Zaznaczenie Show CSS @font-family declarations spowoduje wyświetlenie zawartości stylu. Font objects may only be used from pages under this root określa "wyłączność" czcionki dla określonych stron. Powinniśmy podać nie tylko położenie lokalne, ale i w Sieci (po średniku).

 Kliknięcie Dalej uruchamia proces generowania czcionek. Niestety, nierzadko pojawia się błąd:

Mimo wszystko pojawia się definicja stylu:

Następnie WEFT generuje pliki w katalogu WebFontProjects oraz modyfikuje dokument HTML i generuje pliki .eot we wskazanym przez katalogu.

W części nagłówkowej dokumentu pojawia się definicja stylu:

<STYLE TYPE="text/css">
<!-- /* $WEFT -- Created by: Pawel Wimmer (prwimmer@poczta.onet.pl) on 2002-05-07 -- */
@font-face {
font-family: Bell MT;
font-style: normal;
font-weight: 700;
src: url(BELLMT1.eot);
}
@font-face {
font-family: Calisto MT;
font-style: normal;
font-weight: normal;
src: url(CALISTO1.eot);
}
-->


</STYLE> 

Ciekawe, czy w pliku testowym pojawi się taki obrazek - mamy tu kolejno zwykły tytuł, czcionkę Bell MT i Calisto MT:

Zapisz projekt i wyślij wszystkie pliki na serwer.