Krótki przewodnik po czcionkach internetowych w technologii @font-face

Paul Irish

Wstęp

Funkcja @font-face w CSS3 pozwala nam używać niestandardowych krojów czcionki w internecie w sposób przystępny, zmanipulowany i skalowalny. Ale możesz zapytać: „Dlaczego mamy używać @font-face, jeśli mamy cufon, sIFR i tekst w obrazach?”. Zalety używania @font-face na potrzeby czcionek niestandardowych:

• Pełna możliwość wyszukiwania za pomocą funkcji Znajdź (ctrl-F)
• Ułatwienia dostępu w przypadku technologii wspomagających osoby z niepełnosprawnością, takich jak czytniki ekranu
• Tekst można przetłumaczyć za pomocą usług tłumaczenia lub tłumaczenia w przeglądarce.
• CSS ma pełne możliwości dostosowywania wyświetlania typograficznego: line-height, letter-spacing, text-shadow, text-align oraz selektorów, takich jak ::first-letter i ::first-line.

@font-face w samym sercu

Ogólnie rzecz biorąc, deklarujemy nową niestandardową czcionkę zdalną do użycia w ten sposób:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

Następnie zastosuj:

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

W deklaracji @font-face używamy właściwości font-family do jednoznacznego nazwania czcionki. Może to być cokolwiek, niezależnie od tego, jak nazywa się czcionka. font-family: 'SuperDuperComicSans'; sprawdzi się idealnie, choć niekoniecznie dla Twojej reputacji. We właściwości src wskazujemy, gdzie przeglądarka może znaleźć zasób czcionki. W zależności od przeglądarki niektóre prawidłowe typy czcionek to eot, ttf, otf, svg lub data URI (umieszczone w tekście całe dane czcionek).

Oczywiście nic nie jest tak proste, jak powinno. Początkowym ograniczeniem powyższego kodu było to, że nie udostępniał on EOT w przeglądarce IE 6-8. Składnia @font-face jest dostępna w aplikacji.

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); /* IE 5-8 */ 
  src: local('☺'),             /* sneakily trick IE */
        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
        url('tagesschrift.svg#font') format('svg'); /* iOS */
}

Męczy Cię już głowa? Jeśli chcesz szybko wdrożyć tę funkcję, skorzystaj z generatora Font Squirrel – narzędzia, które upraszcza cały proces, używając czcionki i przygotowywania jej wersji oraz kodu CSS. Są one niezbędne, aby można było wdrożyć czcionki internetowe w praktyce.

Obsługa urządzeń mobilnych?

Mobile Safari obsługuje czcionki internetowe SVG od iOS 3.1, a Android od wersji 2.2 – pliki otf/ttf. Czy użytkownicy mobilni powinni jednak mieć dostęp do tych ulepszeń typograficznych? Głównym powodem jest to, jak WebKit obsługuje tekst, który oczekuje na niestandardową czcionkę za pomocą @font-face: tekst jest niewidoczny. W przypadku połączenia mobilnego o niskiej przepustowości użytkownicy nie zobaczą żadnego tekstu do momentu wczytania ok. 50 tys. danych czcionek. Zespół Webkit pracuje nad rozwiązaniem problemu polegającego na włączeniu czcionki zastępczej po kilku sekundach. Jednak dopóki to się nie stanie, nie uważam za niewłaściwe narażanie użytkowników na takie przeszkody między ich treścią a treścią.

Usługi czcionek Webfont

Wiele usług łączy funkcję @font-face w prosty interfejs API, często umożliwiając dodanie pojedynczego wiersza CSS lub skryptu do kodu HTML oraz pewnej konfiguracji i gotowe. Wiele takich czcionek jak WebInk, Typekit i Fontslive pozwala na używanie czcionek (niekiedy do limitu przepustowości) za miesięczną opłatą. Korzystanie z tych usług jest bardzo wygodne dla przypadkowych programistów, bo eliminuje część komplikacji związanych z obsługą rozwiązania działającego w różnych przeglądarkach.

Interfejs Google Font API umożliwia korzystanie z niewielkiego, wyselekcjonowanego zestawu bezpłatnie licencjonowanych czcionek. Wystarczy, że podasz link do arkusza stylów, a Google zajmie się kwestiami związanymi z działaniami w różnych przeglądarkach i ich wydajnością. To najszybszy sposób na rozpoczęcie korzystania z czcionek internetowych.

Znajdowanie profesjonalnych krojów pisma dla @font-face

Częstą niespodzianką dla projektantów jest to, że zakup licencji na czcionkę (np. do wykorzystania w projekcie graficznym) nie oznacza, że można jej używać w tagu @font-face. Licencje na @font-face (lub umieszczanie w internecie) są zwykle sprzedawane oddzielnie. Przeczytaj uważnie umowę i w razie pytań skontaktuj się z twórcą czcionek. Fontspring to butik z czcionkami, w którym sprzedajesz setki profesjonalnych czcionek i każdy z nich dopuszczono do użytku z czcionkami @font-face. FontFont i inne firmy zaczęli bezpośrednio sprzedawać licencje @font-face, jednak obecnie kierują reklamy tylko na WOFF i EOT, które pomijają znaczącą (ale malejącą) część rynku przeglądarek. Wielu twórców dodaje licencje na czcionki internetowe do swojego katalogu, ale jeśli nie możesz znaleźć takiej, która odpowiada wybranemu krójowi, skontaktuj się ze sklepem i zapytaj o licencje.

Jak radzić sobie z FOUT

Flash bez stylu tekstu to zjawisko w Firefoksie i Operze, które niewielu twórców stron internetowych lubi. Gdy stosujesz niestandardowy krój czcionki za pomocą @font-face, podczas wczytywania strony następuje krótki czas, w którym czcionka nie została jeszcze pobrana i zastosowana. Zostanie użyta następna czcionka ze stosu font-family. Powoduje to błysk innej (zwykle mniej dobrze wyglądającej) czcionki, zanim zostanie uaktualniona.

Interfejsowi Google Font API towarzyszy funkcja WebFont Loader, czyli biblioteka JavaScriptu, której celem jest udostępnienie wielu punktów zaczepienia zdarzeń, dając Ci dużą kontrolę nad wczytywaniem. Przyjrzyjmy się, jak inne przeglądarki mogą naśladować zachowanie przez WebKit ukrywania tekstu zastępczego podczas ładowania czcionki @font-face.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['Tagesschrift'],
    urls: ['http://paulirish.com/tagesschrift.css']
  }
});
</script>

/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
  visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
  visibility: visible;
  font-family: 'Tagesschrift', 'Georgia', serif;
}

Jeśli obsługa JavaScriptu jest wyłączona, tekst pozostaje widoczny przez cały czas, a jeśli w jakiś sposób wystąpią błędy czcionki, bezpiecznie zostanie przywrócony podstawowy szeryf. Warto to traktować jako rozwiązanie tymczasowe – większość ekspertów od czcionek internetowych chce ukryć tekst zastępczy na 2–5 sekund, a następnie go ujawnić. Ten limit czasu jest bardzo przydatny w przypadku niskiej przepustowości i urządzeń mobilnych. Mozilla zamierza wkrótce rozwiązać ten problem.

Prostszym, ale mniej skutecznym rozwiązaniem jest właściwość font-size-adjust, która jest obecnie obsługiwana tylko w przeglądarce Firefox. Pozwala to znormalizować parametr x-height w stosie czcionek, co zmniejsza widoczność zmian w FOUT. Generator Font Squirrel właśnie dodał funkcję, która informuje o współczynniku wysokości x przesyłanych czcionek, dzięki czemu można precyzyjnie ustawić wartość font-size-adjust.

Podsumowanie

Czcionki Webfonts zapewniają projektantom sporo swobody, a wprowadzane w przyszłości funkcje, takie jak niedostępne ligatury i wersje stylistyczne, będą miały znacznie większą elastyczność. Na razie możesz śmiało wdrożyć tę część CSS3, ponieważ obejmuje ona 98% wdrożonych przeglądarek. Możesz już z niego korzystać.