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

Paul Irish

Wprowadzenie

Funkcja @font-face z CSS3 pozwala nam używać niestandardowych krojów pisma w internecie w sposób dostępny, elastyczny i skalowalny. Możesz jednak zapytać: „Dlaczego mam używać @font-face, skoro mam Cufon, sIFR i tekst w obrazach?” Kilka zalet korzystania z @font-face do czcionek niestandardowych:

• pełna możliwość wyszukiwania za pomocą funkcji Znajdź (ctrl-F);
• dostęp do technologii wspomagających, takich jak czytniki ekranu;
• tekst można przetłumaczyć za pomocą usługi tłumaczenia lub tłumaczenia w przeglądarce;
• W CSS można w pełni dostosować wyświetlanie typograficzne: line-height, letter-spacing, text-shadow, text-align oraz selektory takie jak ::first-letter i ::first-line.

@font-face w pigułce

W najprostszej formie deklarujemy nową niestandardową czcionkę zdalnego klienta, która ma być używana w ten sposób:

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

Następnie zastosuj je:

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

W tej deklaracji @font-face używamy właściwości font-family, aby podać nazwę czcionki. Może to być dowolna nazwa, niezależnie od tego, jak nazywa się czcionka. font-family: 'SuperDuperComicSans'; będzie w porządku, ale może nie być dobre dla Twojej reputacji. Właściwość src wskazuje przeglądarce, gdzie może znaleźć zasób czcionki. W zależności od przeglądarki prawidłowe typy czcionek to eot, ttf, otf, svg lub identyfikator URI danych zawierający wszystkie dane czcionki.

Oczywiście nic nie jest tak proste, jak powinno być. Początkowe ograniczenie tego kodu polegało na tym, że nie wysyłał on EOT do IE 6–8. Niezawodna składnia @font-face proponuje sposób rozwiązania tego problemu. Poniżej znajduje się wersja niezawodna.

@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 */
}

Czy już masz ból głowy? Jeśli chcesz szybko rozpocząć pracę, skorzystaj z generatora Font Squirrel. To narzędzie, które upraszcza cały proces, pobierając czcionkę i przygotowując jej warianty oraz kod CSS. Jest to nieodzowne narzędzie do stosowania czcionek internetowych.

Pomoc dotycząca urządzeń mobilnych?

Safari na urządzenia mobilne obsługuje czcionki internetowe SVG od wersji iOS 3.1, a Android obsługuje formaty OTF/TTF od wersji 2.2. Czy jednak użytkownicy mobilni powinni mieć dostęp do ulepszonej typografii? Nie zalecam tego. Głównym powodem jest sposób, w jaki WebKit obsługuje tekst oczekujący na czcionkę niestandardową za pomocą @font-face: tekst jest niewidoczny. Oznacza to, że przy połączeniu komórkowym o niskiej przepustowości użytkownicy nie zobaczą żadnego tekstu, dopóki nie wczytają się dane czcionek (około 50 tys.). Zespół Webkit pracuje nad rozwiązaniem polegającym na włączeniu czcionki zastępczej po upływie kilku sekund, ale dopóki nie zostanie ono wdrożone, nie uważam, aby było uczciwe wobec użytkowników, aby stawiać takie przeszkody między nimi a Twoimi treściami.

Usługi związane z czcionkami na stronę

Wiele usług łączy funkcję @font-face z łatwym interfejsem API, co często pozwala dodać do kodu HTML pojedynczą linię kodu CSS lub skryptu i wprowadzić kilka ustawień. Wiele usług, takich jak WebInk, Typekit i Fontslive, umożliwia korzystanie z czcionek (czasem z ograniczeniem przepustowości) za opłatą miesięczną. Korzystanie z tych usług jest bardzo wygodne dla zwykłych programistów, ponieważ pozwala im uniknąć niektórych komplikacji związanych z obsługą rozwiązania działającego w różnych przeglądarkach.

Interfejs Google Font API umożliwia korzystanie z małego, starannie dobranego zestawu czcionek z otwartą licencją. Wystarczy połączyć go ze sformatowanymi arkuszami stylów, a Google zajmie się problemami z wydajnością i obsługą w różnych przeglądarkach. To najszybszy sposób na rozpoczęcie pracy z czcionkami internetowymi.

Wyszukiwanie profesjonalnych krojów pisma do użycia w regułach @font-face

Projektanci często są zaskoczeni, że zakup licencji na czcionkę (np. do użytku w projektach graficznych) nie oznacza, że mogą jej używać w @font-face. Licencje na @font-face (lub umieszczanie w internecie) są zwykle sprzedawane oddzielnie. Uważnie przeczytaj umowę. Jeśli masz pytania, skontaktuj się z twórcą czcionek. Fontspring to sklep z czcionkami, w którym można kupić setki wysokiej jakości profesjonalnych czcionek, które można używać z funkcją @font-face. FontFont i inne firmy zaczęły sprzedawać licencje @font-face bezpośrednio, ale obecnie tylko dla formatów WOFF i EOT, co wyklucza znaczną (choć malejącą) część rynku przeglądarek. Wiele firm dodaje do katalogu licencje na czcionki internetowe, ale jeśli nie możesz znaleźć licencji na wybraną czcionkę, skontaktuj się z firmą, aby zapytać o nią.

Zarządzanie FOUT

Błyskawiczne wyświetlanie tekstu bez stylów to zjawisko występujące w Firefoksie i Operze, które nie jest lubiane przez projektantów stron internetowych. Gdy stosujesz niestandardowy krój pisma za pomocą atrybutu @font-face, podczas wczytywania strony występuje krótki moment, w którym czcionka nie została jeszcze pobrana i zastosowana, więc używana jest następna czcionka w grupie font-family. W efekcie przed uaktualnieniem wyświetla się inny (zazwyczaj mniej atrakcyjny) krój pisma.

Interfejs Google Font API jest uzupełniony o WebFont Loader, czyli bibliotekę JavaScript, która udostępnia kilka haka zdarzeń, dzięki którym można w dużej mierze kontrolować wczytywanie. Zobacz, jak możesz sprawić, aby inne przeglądarki naśladowały zachowanie WebKit polegające na ukrywaniu tekstu zastępczego podczas wczytywania 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 JavaScript jest wyłączony, tekst będzie widoczny przez cały czas, a jeśli czcionka będzie miała jakieś błędy, zostanie automatycznie zastąpiona podstawową czcionką szeryfową. Na razie jest to rozwiązanie tymczasowe. Większość ekspertów od czcionek internetowych woli ukrywać tekst zastępczy przez 2–5 sekund, a potem go wyświetlać. Ten limit czasu jest bardzo przydatny w przypadku urządzeń mobilnych i urządzeń o niskiej przepustowości. Mozilla chce w krótce rozwiązać ten problem.

Lżejszym, ale mniej skutecznym rozwiązaniem jest właściwość font-size-adjust, która jest obecnie obsługiwana tylko w Firefoksie. Umożliwia to normalizację wysokości x w całym zbiorze czcionek, co zmniejsza widoczne zmiany w wysokości znaku. W fakcie generator Font Squirrel właśnie dodał funkcję, która podaje stosunek wysokości x przesłanych czcionek, dzięki czemu możesz dokładnie ustawić wartość font-size-adjust.

Podsumowanie

Webfonts dają projektantom sporo swobody, a dzięki nadchodzącym funkcjom, takim jak opcjonalne ligatury i alternatywywy stylistyczne, będą oni mieli jeszcze większą elastyczność. Obecnie możesz śmiało stosować tę część CSS3, ponieważ obejmuje ona 98% wdrożonych przeglądarek. Miłej zabawy!