Dostosowanie rozmiaru CSS do @font-face

Podczas ładowania czcionki internetowej możesz dostosować jej skalę, aby znormalizować rozmiary czcionek w dokumencie i zapobiegać przesuwaniu czcionki podczas przełączania się między czcionkami.

Przeanalizujmy tę prezentację, w której font-size to spójny parametr 64px, a jedyną różnicą między każdym z tych nagłówków jest font-family. Przykłady po lewej stronie nie zostały dostosowane i ich rozmiar końcowy jest niespójny. W przykładach po prawej stronie używamy parametru size-adjust, aby sprawdzić, czy 64px to spójny rozmiar końcowy.

W tym poście omawiamy nowy deskryptor CSS font-face o nazwie size-adjust. Pokazuje też kilka sposobów poprawiania i normalizowania rozmiarów czcionek, by zapewnić użytkownikom większy komfort, spójny projekt strony i bardziej przewidywalny układ strony. Jednym z ważnych przypadków użycia jest optymalizacja renderowania czcionek internetowych w celu uniknięcia skumulowanego przesunięcia układu (CLS).

Oto interaktywna prezentacja obszaru problemu. Spróbuj zmienić krój czcionki za pomocą menu i obserwuj:

1. Różnice wysokości w wynikach.
2. Efektowne wizualnie zmiany treści
3. Przenoszenie interaktywnych obszarów docelowych (menu skacze).

Jak skalować czcionki za pomocą size-adjust

Wprowadzenie do składni:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. Tworzy niestandardowy krój czcionki o nazwie Adjusted Typeface.
2. Używa metody size-adjust, aby skalować każdy glif w górę do 150% ich domyślnego rozmiaru.
3. Ma to wpływ tylko na jeden zaimportowany krój pisma.

Użyj powyższego kroju niestandardowej w następujący sposób:

h1 {
  font-family: "Adjusted Typeface";
}

Ograniczanie CLS dzięki bezproblemowej zamianie czcionek

W tym GIF-u obejrzyj przykłady po lewej stronie i zobacz, jak następuje przesunięcie po zmianie czcionki. To tylko krótki przykład z jednym elementem nagłówka, który jest bardzo zauważalny.

Aby poprawić renderowanie czcionek, warto użyć zamieniania czcionek. Zrenderuj szybko ładującą się czcionkę systemową, aby najpierw wyświetlać treść, a potem zmień ją na czcionkę internetową po zakończeniu ładowania czcionki internetowej. Łączy to zalety obu tych elementów: treść pojawia się jak najszybciej, a użytkownik otrzymuje ładnie stylizowaną stronę, nie poświęcając jej czasu. Problem polega jednak na tym, że czasami po wczytaniu czcionki internetowej przesuwa się cała strona, ponieważ rozmiar pola jest nieco inny.

Umieszczenie wartości size-adjust w regule @font-face powoduje globalne dostosowanie glify dla kroju czcionki. Jeśli dobrze to zrobisz, uzyskasz minimalne zmiany wizualne i płynną wymianę. Aby zapewnić bezproblemową zamianę, dostosuj ręcznie lub użyj tego kalkulatora dostosowania rozmiaru firmy Malte Ubl.

Na początku tego posta naprawiliśmy problem z rozmiarem czcionki, korzystając z prób i błędów. Element size-adjust był ponaglony w kodzie źródłowym do momentu, gdy ten sam nagłówek w Cookie i Arial wyrenderował 64px tak samo jak Press Start 2P. Wyrównałem 2 czcionki do docelowego rozmiaru czcionki.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

Kalibrowanie czcionek

Jako autor określasz cele kalibracji umożliwiające normalizację skali czcionki. Możesz znormalizować czcionki Times, VAST lub czcionkę systemową, a następnie dostosować do nich niestandardowe czcionki. Możesz też dostosować czcionki lokalne do pobieranego materiału.

Strategie kalibracji urządzenia size-adjust:

1. Cel zdalny:
   Dostosuj czcionki lokalne do pobranych czcionek.
2. Lokalne kierowanie:
   Dostosuj pobrane czcionki do lokalnych czcionek docelowych.

Przykład 1. Cel zdalny

Rozważmy ten fragment kodu, który dostosowuje lokalnie dostępną czcionkę do rozmiaru zgodnej ze zdalną czcionką niestandardową źródłową. Zdalna czcionka niestandardowa jest celem kalibracji. Jest to na przykład czcionka marki:

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

W tym przykładzie lokalna czcionka {8/} dostosowuje się do załadowanej czcionki niestandardowej, która zapewni ich płynną zmianę.

Zaletą tej strategii jest zapewnienie projektantom i deweloperom tych samych czcionek pod względem rozmiaru i typografii. Marka jest celem kalibracji. To świetna wiadomość dla systemów projektowania.

Kalkulator Malte'a działa także na podstawie kroju czcionki marki. Wybierz czcionkę Google, a my obliczymy, jak dostosować czcionkę, aby płynnie się z nią zamienić. Oto przykład kodu CSS Roboto z kalkulatora, w którym wczytany jest format VAST o nazwie „Roboto-fallback”:

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

Aby utworzyć dostosowanie w pełni na wielu platformach, zapoznaj się z przykładem poniżej, w którym 2 dostosowane lokalne czcionki zastępcze przewidują użycie czcionki związanej z marką.

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

Przykład 2. Cel lokalny

Rozważmy ten fragment kodu, który dostosowuje niestandardową czcionkę marki do formatu VAST:

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

Zaletą tej strategii jest renderowanie bez żadnych dostosowań, które pozwala dopasować do siebie wszystkie przychodzące czcionki.

Dostrajanie za pomocą ascent-override, descent-override i line-gap-override

Jeśli ogólne skalowanie glifów nie jest wystarczające do dostosowania Twojego projektu lub strategii wczytywania, oto kilka drobnych opcji dostrajania, które działają razem z zasadą size-adjust. Właściwości ascent-override, descent-override i line-gap-override są obecnie zaimplementowane w Chromium w wersji 87 i nowszych oraz w Firefoksie w wersji 89 i nowszych.

ascent-override

Deskryptor ascent-override określa wysokość powyżej punktu odniesienia czcionki.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

Czerwony nagłówek (niedostosowany) ma odstęp nad wielką literą A i O, a niebieski nagłówek został dostosowany tak, aby jego wartość cap height ściśle przylegała do ramki ograniczającej.

descent-override

Deskryptor descent-override określa wysokość poniżej punktu odniesienia czcionki.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

Czerwony nagłówek (niedostosowany) ma odstęp poniżej linii bazowej D i O, a niebieski nagłówek został dostosowany tak, aby litery przylegały do punktu odniesienia.

line-gap-override

Deskryptor line-gap-override definiuje wartość odstępu między wierszami czcionki. Jest to zalecana odstępy między wierszami lub zewnętrzne wprowadzenie.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

Czerwony nagłówek (niedostosowany) nie ma line-gap-override, zazwyczaj jest 0%, a niebieski nagłówek został poprawiony o 50%, tworząc odpowiednio odstęp nad i pod literami.

Podsumowanie

Każde z tych zastąpień zapewnia dodatkowy sposób usuwania nadmiarów z bezpiecznego ramki ograniczającej tekst w internecie. Możesz dostosować pole tekstowe do dokładnej prezentacji.

Podsumowanie

Funkcja CSS @font-face size-adjust to ciekawy sposób na dostosowanie ramki ograniczającej tekst w układach internetowych, aby ułatwić zamianę czcionek i uniknąć przesunięcia układu. Więcej informacji znajdziesz na tych stronach:

• Specyfikacja czcionek CSS, poziom 5
• Dostosowanie rozmiaru w MDN
• Bezproblemowy generator czcionek do zamiany @font-face
• Skumulowane przesunięcie układu (CLS) w web.dev
• Nowy sposób ograniczania wpływu ładowania czcionek: deskryptory czcionek CSS

Fot. Kristian Strand w programie Unsplash