Reguła CSS @font-face

Reguła CSS @font-face umożliwia dołączanie plików fontów do arkuszy stylów używanych na stronach internetowych. Daje to projektantowi możliwość korzystania z dowolnych krojów pisma i na uniezależnienie procesu projektowania treści od zasobów dostępnych na urządzeniu użytkownika lub od bezpiecznych fontów internetowych. Dzięki regule @font-face projektant może wybrać dowolny krój pisma i dołączyć do strony odpowiadający mu font, aby mieć pewność, że jego tekst na każdej platformie będzie wyglądał tak samo.

Jeśli planowane jest używanie różnych odmian wybranego kroju pisma, font odpowiadający każdej z nich można dołączyć za pomocą osobnej reguły @font-face. Dzięki temu możliwe jest stworzenie własnej niestandardowej rodziny fontów dokładnie spełniającej wymagania konkretnego projektu. Jeśli na danej stronie używane są tylko niektóre ze zdefiniowanych odmian, przeglądarka pobierze tylko potrzebne pliki fontów.

Przykład

Poniżej znajduje się prosty przykład użycia reguły @font-face w celu dołączenia do strony fontu o nazwie MojFont w formacie WOFF.

@font-face {
  font-family: "MojFont";
  src: url("MojFont.woff") format("woff");
}

Wartości i składnia

Definicja reguły @font-face składa się z szeregu deklaracji zwanych deskryptorami (ang. descriptor), które określają wszystkie aspekty dołączanego fontu, w tym jego położenie oraz dopuszczalne wartości lub, w przypadku fontów zmiennych, zakresy wartości.

Większość deskryptorów jest opcjonalna, ale dwa z nich, font-family i src(), są obowiązkowe i jeśli nie zostaną zdefiniowane, przeglądarka zignoruje całą regułę. Ponadto należy pamiętać, że nawet jeśli użytkownik nie zdefiniuje niektórych deskryptorów, to i tak zostaną one zdefiniowane, ponieważ reguła @font-face nada im wartości domyślne.

Poniżej znajduje się opis wszystkich deskryptorów reguły CSS @font-face.

Deskryptory reguły @font-face

ascent-override

Deskryptor ascent-override określa szerokość części górnej fontu, czyli wysokość obszaru nad linią bazową pisma, w którym znajdują się górne części liter w śródliniowym kontekście formatowania.

Jako wartość deskryptor ascent-override przyjmuje słowo kluczowe normal (ustawienie domyślne) lub wartość procentową. Słowo kluczowe normal oznacza pobranie odpowiedniej wartości bezpośrednio z pliku fontu, natomiast wartości procentowe odnoszą się do rozmiaru pisma. Wartości ujemne są niedozwolone.

Deskryptora tego można użyć w celu dostosowania właściwości fontu drugiego wyboru, który zostanie użyty w razie niedostępności fontu podstawowego, aby zapewnić spójny wygląd treści w obu przypadkach, np.:

@font-face {
  font-family: "Moj font";
  src: url("/moj-font.woff");
}
@font-face {
  font-family: "Zapasowy font";
  src: url("/zapasowy-font.woff");
  ascent-override: 110%;
}

descent-override

Deskryptor descent-override określa szerokość części dolnej fontu, czyli wysokość obszaru pod linią bazową pisma, w którym znajdują się dolne części liter w śródliniowym kontekście formatowania.

Jako wartość deskryptor descent-override przyjmuje słowo kluczowe normal (ustawienie domyślne) lub wartość procentową. Słowo kluczowe normal oznacza pobranie wartości bezpośrednio z pliku fontu, natomiast wartości procentowe odnoszą się do rozmiaru pisma. Wartości ujemne są niedozwolone.

Deskryptora tego, podobnie jak deskryptora ascent-override, można użyć w celu dostosowania właściwości fontu zapasowego, który zostanie użyty w razie niedostępności fontu podstawowego, aby zapewnić spójny wygląd treści w obu przypadkach, np.:

@font-face {
  font-family: "Zapasowy font";
  src: url("/zapasowy-font.woff");
  descent-override: 115%;
}

font-display

Proces ładowania fontu przez przeglądarkę internetową jest podzielony na trzy etapy, którymi można sterować za pomocą deskryptora font-display:

Czas blokowania (ang. font block period)

Jeśli podczas wczytywania strony nie uda się od razu załadować fontu pierwszego wyboru, przeglądarka zastępczo renderuje tekst przy użyciu niewidzialnego fontu zapasowego w oczekiwaniu na font właściwy. Jeśli pojawi się on przed upływem czasu blokowania, to zostaje on normalnie załadowany i przeglądarka renderuje tekst przy jego użyciu.

Czas zamiany (ang. font swap period)

Jeśli przeglądarce nie uda się wczytać fontu pierwszego wyboru, to wyrenderuje ona tekst przy użyciu fontu zapasowego. Potem następuje określony czas zamiany, podczas którego font podstawowy może zostać jeszcze użyty, jeśli stanie się dostępny w tym czasie.

Czas niepowodzenia (ang. font failure period)

Jest to czas, w którym przeglądarka uznaje, że nie udało się załadować podstawowego fontu i w związku z tym używa ona fontu zapasowego według normalnych zasad wyboru fontu.

Deskryptor font-display określa sposób ładowania fontu w zależności od tego, czy i kiedy został on pobrany przez przeglądarkę i jest gotowy do użycia, odpowiednio sterując etapami procesu ładowania fontu za pomocą zestawu słów kluczowych. Jako wartość przyjmuje on jedno z następujących słów kluczowych:

• auto – sposób ładowania fontu jest automatycznie wybierany przez przeglądarkę. Jest to wartość domyślna.
• block – ustawia krótki czas blokowania (zalecane są trzy sekundy) i daje nieograniczony czas na zamianę. To znaczy, że jeśli font nie zostanie załadowany, najpierw przeglądarka renderuje „niewidzialny” tekst, a następnie zastępuje go właściwym, kiedy potrzebny font zostanie załadowany.
• swap – ustawia bardzo krótki czas okres blokowania (zalecana jest wartość nie większa niż 100 ms) i daje nieograniczony czas na zamianę. To znaczy, że jeśli wymagany font nie zostanie załadowany, przeglądarka od razu załaduje font zapasowy, po czym zamieni go na właściwy, gdy tylko uda się go załadować.
• fallback – ustawia bardzo krótki czas blokowania (zalecana jest wartość nie większa niż 100 ms) i daje krótki czas na zamianę (zalecane są trzy sekundy). W efekcie, jeżeli font właściwy nie zostanie załadowany, najpierw zostanie użyty font zapasowy, który zostanie zamieniony na właściwy, gdy tylko ten zostanie załadowany. Jeśli jednak minie czas zamiany, font zapasowy pozostanie niezmieniony do końca sesji przeglądania strony.
• optional – używa fontu, jeśli może on być załadowany natychmiast. W przeciwnym razie przeglądarka przyjmuje, że czas blokowania i zamiany fontu już upłynął. W takiej sytuacji przeglądarka może anulować pobieranie tego fontu lub może go załadować z bardzo niskim priorytetem, posługując się w zamian fontem zapasowym.

Przykład użycia:

@font-face {
  font-family: "Zapasowy font";
  src: url("/zapasowy-font.woff");
  font-display: swap;
}

font-family

Deskryptor font-family określa nazwę odmiany pisma zdefiniowanej przez regułę @font-face, która może być używana we wszystkich własnościach dotyczących fontów, np.:

@font-face {
  font-family: "Zapasowy font";
  src: url("/zapasowy-font.woff");
}
p {
  font-family: "Zapasowy font";
}

font-width

Deskryptor font-width umożliwia wybór odmiany kroju pisma o określonej szerokości, np. normalną, skondensowaną, rozszerzoną itd. Przyjmuje on takie same wartości, jak własność font-width, której opis znajduje się na stronie Własność CSS font-width.

font-style

Deskryptor font-style pozwala na określenie stylu wybranego kroju pisma – pismo pochyłe, kursywa lub pismo normalne. Przyjmuje on takie same wartości, jak własność font-style, której opis znajduje się na stronie Własność CSS font-style.

font-weight

Deskryptor font-weight określa grubość lub zakres grubości odmiany kroju pisma definiowanego przez regułę @font-face. Przyjmuje on takie same wartości, jak własność font-weight, której opis znajduje się na stronie Własność CSS font-weight.

font-feature-settings

Deskryptor font-feature-settings umożliwia definiowanie niskopoziomowych właściwości fontów OpenType. Przyjmuje on takie same wartości, jak własność font-feature-settings, której opis znajduje się na stronie Własność CSS font-feature-settings, z wyjątkiem globalnych słów kluczowych CSS.

font-variation-settings

Deskryptor font-variation-settings umożliwia definiowanie niskopoziomowych właściwości fontów TrueType lub OpenType. Przyjmuje on takie same wartości, jak własność font-variation-settings, której opis znajduje się na stronie Własność CSS font-variation-settings, z wyjątkiem globalnych słów kluczowych CSS.

line-gap-override

Deskryptor line-gap-override określa szerokość tzw. leadingu zewnętrznego lub odstępu między wierszami, czyli odstępu między dolną linią jednego wiersza tekstu, a górną linią wiersza znajdującego się pod nim, jak pokazano na poniższej ilustracji:

Jako wartość deskryptor line-gap-override przyjmuje słowo kluczowe normal lub wartość procentową:

• Słowo kluczowe normal: pobiera wartość leadingu zewnętrznego z pliku fontu. Jest to wartość domyślna.
• Wartość procentowa: odnosi się do rozmiaru pisma. Wartości ujemne są niedozwolone.

Przykład:

@font-face {
  font-family: "Moj font";
  src: url("/moj-font.woff");
  line-gap-override: 120%;
}

font-size-adjust

Deskryptor font-size-adjust umożliwia dostosowanie współczynnika rozmiaru fontu (ang. font aspect value) , czyli stosunku wysokości małej litery x fontu do wysokości jego wielkich liter.

Stosunek wysokości liter małych do dużych przy określonym rozmiarze pisma ma znaczenie dla czytelności tekstu i w każdym foncie może być inny. Jeśli więc font pierwszego wyboru nie zostanie wczytany przez przeglądarkę, za pomocą deskryptora font-size-adjust można dostosować tę wartość w foncie drugiego wyboru.

Jako wartość deskryptor font-size-adjust przyjmuje słowo kluczowe none lub liczbę z przedziału od zera do nieskończoności:

Słowo kluczowe none

Współczynnik rozmiaru nie jest dostosowywany. Jest to wartość domyślna.

Liczba

Określa wartość współczynnika rozmiaru.

Przykład:

@font-face {
  font-family: "Zapasowy font";
  src: url("/zapasowy-font.woff");
  font-size-adjust: 0.7;
}

src

Deskryptor src określa źródło fontu oraz ewentualnie jego format i używane przez niego technologie. Jest to jeden z dwóch wymaganych deskryptorów reguły @font-face (drugi to font-family). Jego wartością jest lista rozdzielanych przecinkami zewnętrznych lub lokalnych źródeł fontów. Przeglądarka wybiera z niej pierwszą pozycję, którą uda jej się wczytać.

@font-face {
  font-family: "Moj font";
  src: local(Font),
  src: url("/font.woff"),
  src: url("/font.otf"),
  src: url("/font.svg"),
}

Źródło fontu można określić na dwa sposoby: zewnętrznie lub lokalnie. Do określania źródła zewnętrznego służy funkcja url(), której mogą towarzyszyć opcjonalne atrybuty w postaci funkcji format() i tech(). Natomiast do określania źródła lokalnego służy funkcja local(), z którą nie stosuje się żadnych dodatkowych atrybutów.

Źródło zewnętrzne

Funkcji url()() opcjonalnie mogą towarzyszyć funkcje format() i tech(), które określają format danego zasobu i używane w nim technologie. Na podstawie ich wartości przeglądarka stwierdza, czy obsługuje dany font i podejmuje decyzję, czy go pobrać. Jeśli przeglądarka nie zna lub nie obsługuje danego formatu albo którejkolwiek z technologii, to nie pobiera pliku, co pozwala zaoszczędzić transfer. W przypadku braku definicji tych atrybutów przeglądarka zawsze pobiera font i dopiero wtedy sprawdza, czy jest w stanie z niego skorzystać.

Funkcja format określa format fontu. Poniższa tabela zawiera wykaz formatów fontów wraz z odpowiadającymi im słowami kluczowymi, których można używać w tej funkcji. Starsze przeglądarki nie obsługują składni ze słowami kluczowymi, tylko z łańcuchami. Dlatego w trzeciej kolumnie podane są odpowiedniki słów kluczowych w formie łańcuchowej. Z kolei w czwartej kolumnie znajdują się typowe rozszerzenia plików fontów każdego typu.

Przykłady:

@font-face {
  font-family: "Moj font";
  src: url("/font.woff") format(woff),
  src: url("/font.otf") format(opentype),
  src: url("/font.woff2") format(woff2),
}

W przypadku formatów fontów mogących zawierać więcej niż jeden font, tzw. kolekcji fontów (ang. font collection), takich jak OTC (OpenType Collection), czy TTC (TrueType Collection), konkretny „podfont” należy wskazać za pomocą identyfikatora fragmentu. Jeśli dany format nie zawiera identyfikatorów, to stosowane jest indeksowanie o numeracji zaczynającej się od 1, np.:

src: url("kolekcja-fontow.otc#1")
src: url("kolekcja-fontow.otc#identyfikator")

Za pomocą funkcji tech() można określić technologie używane w danym foncie. Lista wartości jest dość długa i wszystkie one odnoszą się do właściwości różnych typów fontów. Poniższa tabela zawiera ich zestawienie z krótkimi opisami.

Źródło lokalne

Jeśli font jest dostępny lokalnie na urządzeniu, to należy go zdefiniować za pomocą funkcji local(), której wartością może być pełna lub postscriptowa nazwa konkretnej odmiany pisma lub rodziny fontów w cudzysłowie albo bez niego. Wielkość liter w nazwie nie ma znaczenia.

Wszystkie poniższe przykłady są poprawne i znaczą to samo:

src: local(MicrosoftUighur-Bold); /* Nazwa postscriptowa */
src: local(Microsoft Uighur Bold); /* „Normalna” nazwa fontu */
src: local('microsoft uighur Bold'); /* Nazwa w cudzysłowie pojedynczym zapisana małymi literami */
src: local("Microsoft Uighur Bold"); /* Nazwa w cudzysłowie podwójnym */

Starsze przeglądarki

Reguła @font-face powinna zawierać jeden deskryptor src zawierający listę potencjalnych źródeł fontów rozdzielonych przecinkami. Z tej listy przeglądarka wybiera pierwszą pozycję, którą uda się jej załadować, więc powinno się je wpisywać w kolejności od pierwszego do ostatniego wyboru.

To znaczy, że w większości przypadków fonty lokalne powinny być zdefiniowane przed zdalnymi, a fonty z warunkami format() i tech() przed tymi, które ich nie mają. Jeśli przeglądarka nie obsługuje funkcji tech(), to uznaje ją za błąd i w związku z tym pomija daną deklarację, przechodząc do następnej w kolejności w deskryptorze src.

Niestety niektóre starsze przeglądarki nie działają w ten sposób, tylko w przypadku znalezienia niepoprawnej wartości ignorują cały deskryptor src, a więc nie wybierają żadnego fontu z zestawu zdefiniowanego przez projektanta.

Ten problem można rozwiązać przez zdefiniowanie kilku deskryptorów src w jednej regule @font-face. Deskryptory te są interpretowane przez przeglądarkę od ostatniego, a więc na końcu należy umieścić wersję dla nowszych przeglądarek, a na początku wersję dla starszych. Dzięki temu, kiedy starsza przeglądarka wczyta ostatnią deklarację deskryptora src i znajdzie w niej nieznany składnik, to zignoruje ją w całości i przejdzie do przedostatniej. Jeśli ta będzie „poprawna” to jej użyje, a jeśli nie – to przejdzie do jeszcze wcześniejszej itd. Na samym początku należy umieścić najprostszą wersję deskryptora, która jest obsługiwana przez wszystkie przeglądarki, np.:

@font-face {
  font-family: "Moj Font";
  src: url("mojfont.ttf") format("truetype");
  src: url("mojfont.otf") format(opentype)  tech(features-opentype);
}

unicode-range

Deskryptor unicode-range określa zakres znaków Unicode udostępniany przez regułę @font-face. Jeśli na stronie nie jest używany żaden ze znaków z tego zakresu, to przeglądarka nie pobiera fontu, a jeśli jest używany przynajmniej jeden z nich, to przeglądarka pobiera cały font.

Podstawowym elementem wartości deskryptora unicode-range jest token składający się z litery U lub u, po której bezpośrednio następują znak + oraz jednostka kodowa Unicode. Tokeny te mogą być używane na trzy sposoby:

• Jedna jednostka kodowa: reprezentuje pojedynczy znak za pomocą ciągu 1–6 cyfr szesnastkowych, np. U+A7.
• Zakres jednostek kodowych: jest reprezentowany przez jednostkę początkową i końcową połączone znakiem łącznika. W tym przypadku członu U+ używa się tylko raz, na początku, np. U+100-17F.
• Zakres z symbolem wieloznacznym: znak ? jest symbolem wieloznacznym reprezentującym dowolną cyfrę szesnastkową, np. U+1?F.

Przykład:

@font-face {
  font-family: "Moj Font";
  src: url("mojfont.ttf") format("truetype");
  unicode-range: U+370-3FF;
}