Dostosowanie rozmiaru CSS do @font-face

Podczas wczytywania czcionki internetowej możesz teraz dostosować jej skalę, aby ujednolicić rozmiary czcionek w dokumencie i zapobiec przesunięciu układu podczas przełączania się między czcionkami.

Adam Argyle

Spójrz na tę wersję demonstracyjną, w której font-size to stała wartość 64px, a jedyną różnicą między nagłówkami jest font-family. Przykłady po lewej stronie nie zostały dostosowane i mają niespójny rozmiar końcowy. W przykładach po prawej stronie użyto size-adjust, aby zapewnić, że 64px ma spójny ostateczny rozmiar.

W tym przykładzie do wyświetlania wysokości używane są narzędzia do debugowania układu siatki CSS w Narzędziach deweloperskich w Chrome.

W tym poście omawiamy nowy deskryptor font-face w CSS o nazwie size-adjust. Pokazuje też kilka sposobów korygowania i normalizowania rozmiarów czcionek, aby zapewnić użytkownikom lepsze wrażenia, spójne systemy projektowania i bardziej przewidywalny układ strony. Jednym z ważnych przypadków użycia jest optymalizacja renderowania czcionek internetowych, aby zapobiegać skumulowanemu przesunięciu układu (CLS).

Browser Support

• 92
• 92
• 92
• 17

Source

Oto interaktywna prezentacja obszaru problemowego. Spróbuj zmienić krój pisma za pomocą menu i zobacz, co się stanie:

1. różnice wysokości w wynikach.
2. wizualnie nieprzyjemne przesunięcia treści,
3. Przenoszenie interaktywnych obszarów docelowych (menu rozwijane przeskakuje).

Kluczowe pojęcie: rodzina czcionek a krój pisma: krój pisma jest określany przez nazwę rodziny i krój czcionki. Helvetica Bold odnosi się do konkretnego pogrubionego kroju pisma, a Helvetica – do całej rodziny ponad 8 krojów pisma (zwykłego, pogrubionego, kursywy itp.). W CSS @font-face będziesz mieć do czynienia z krojami pisma, mimo że do ich użycia trzeba napisać font-family.

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 pisma o nazwie Adjusted Typeface.
2. Używa size-adjust, aby powiększyć każdy glif do 150% domyślnego rozmiaru.
3. Wpływa tylko na pojedynczy zaimportowany krój pisma.

Użyj niestandardowego kroju pisma w ten sposób:

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

Ostrzeżenie: jeśli drugi nagłówek w powyższym przykładzie nie jest większy od pierwszego, Twoja przeglądarka nie obsługuje size-adjust.

Zmniejszanie CLS dzięki płynnej zamianie czcionek

W poniższym GIF-ie przyjrzyj się przykładom po lewej stronie i zobacz, jak zmienia się układ po zmianie czcionki. To tylko niewielki przykład z jednym elementem nagłówka, a problem jest bardzo widoczny.

W przykładzie po lewej stronie występuje przesunięcie układu, a w przykładzie po prawej – nie.

Aby poprawić renderowanie czcionek, warto zastosować zamianę czcionek. Wyrenderuj szybko ładującą się czcionkę systemową, aby najpierw wyświetlić treść, a następnie zamień ją na czcionkę internetową, gdy ta się załaduje. Dzięki temu uzyskasz najlepsze rezultaty: treść będzie widoczna tak szybko, jak to możliwe, a strona będzie ładnie sformatowana, bez marnowania czasu użytkownika na oczekiwanie na treść. Problem polega jednak na tym, że czasami po wczytaniu czcionki internetowej cała strona się przesuwa, ponieważ czcionka ma nieco inny rozmiar pola.

więcej treści oznacza większe potencjalne przesunięcie układu podczas zamiany czcionki

Umieszczenie size-adjust w regule @font-face powoduje ustawienie globalnego dostosowania glifów dla kroju czcionki. Odpowiednie wyczucie czasu pozwoli na płynną zmianę, która będzie niemal niezauważalna. Aby uzyskać płynną zmianę, dostosuj rozmiar ręcznie lub skorzystaj z kalkulatora rozmiaru, który stworzył Malte Ubl.

Wybierz czcionkę internetową Google, aby otrzymać wstępnie dostosowany fragment kodu @font-face.

Na początku tego posta rozwiązanie problemu z rozmiarem czcionki zostało wykonane metodą prób i błędów. Wprowadzono zmiany w kodzie źródłowym size-adjust, aby ten sam nagłówek w Cookie i Arial renderował ten sam element 64px, który naturalnie renderował Press Start 2P. Wyrównałem(-am) 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 na potrzeby normalizacji skali czcionki. Możesz ujednolicić czcionki, używając Times, Arial lub czcionki systemowej, a następnie dostosować czcionki niestandardowe, aby pasowały do reszty. Możesz też dostosować czcionki lokalne, aby pasowały do pobranych.

Strategie kalibracji size-adjust:

1. Zdalny cel:
   dostosuj czcionki lokalne do pobranych czcionek.
2. Kierowanie lokalne:
   dostosuj pobrane czcionki do lokalnych czcionek docelowych.

Przykład 1. Cel zdalny

Rozważ ten fragment kodu, który dostosowuje lokalnie dostępną czcionkę do rozmiaru niestandardowej czcionki ze zdalnego źródła. Zdalna czcionka niestandardowa jest celem kalibracji, być może 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 czcionka lokalna Arial dostosowuje się do wczytanej czcionki niestandardowej, aby zapewnić płynną zamianę.

Ta strategia ma tę zaletę, że projektanci i programiści mogą używać tej samej czcionki do określania rozmiaru i typografii. Marka jest celem kalibracji. To świetna wiadomość dla systemów projektowania.

Kalkulator Malte działa na podobnej zasadzie, ale jego celem jest krój pisma marki. Wybierz czcionkę Google Fonts, a narzędzie obliczy, jak dostosować czcionkę Arial, aby można było ją bezproblemowo zamienić. Oto przykład kodu CSS czcionki Roboto z kalkulatora, w którym czcionka Arial jest wczytywana i nazywana „Roboto-fallback”:

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

Ostrzeżenie: kolejność font-family ma kluczowe znaczenie. To tutaj określasz kolejność i priorytet. Upewnij się, że krój pisma, który najbardziej Ci odpowiada, jest na pierwszym miejscu. Ponadto czcionka local(Arial) może nie być dostępna na wszystkich urządzeniach użytkownika, dlatego ważne jest, aby podać kilka czcionek zastępczych w rodzinie czcionek.

Aby utworzyć dostosowanie w pełni na wielu platformach, zapoznaj się z poniższym przykładem, który zawiera 2 dostosowane lokalne czcionki zastępcze w oczekiwaniu na czcionkę marki.

@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. Kierowanie lokalne

Rozważ ten fragment kodu, który dostosowuje niestandardową czcionkę marki do czcionki Arial:

@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 korekt, a następnie dostosowywanie wszystkich przychodzących czcionek.

Dokładniejsze dostrajanie za pomocą ascent-override, descent-override i line-gap-override

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

ascent-override

Browser Support

• 87
• 87
• 89
• 

Source

Deskryptor ascent-override określa wysokość czcionki powyżej linii bazowej.

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

Czerwony nagłówek (nieskorygowany) ma odstęp nad wielkimi literami A i O, a niebieski nagłówek został skorygowany, dzięki czemu wysokość wielkich liter jest dopasowana do ogólnej ramki ograniczającej.

descent-override

Browser Support

• 87
• 87
• 89
• 

Source

Deskryptor descent-override określa wysokość poniżej linii bazowej czcionki.

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

Czerwony nagłówek (nieskorygowany) ma odstęp pod liniami bazowymi liter D i O, natomiast niebieski nagłówek został skorygowany, dzięki czemu litery przylegają do linii bazowej.

line-gap-override

Browser Support

• 87
• 87
• 89
• 

Source

Deskryptor line-gap-override określa odstęp między wierszami dla czcionki. Jest to zalecany odstęp między wierszami lub odstęp zewnętrzny.

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

Czerwony nagłówek (nieskorygowany) nie ma line-gap-override, czyli ma wartość 0%, a niebieski nagłówek został skorygowany o 50%, co spowodowało utworzenie odpowiedniej przestrzeni nad literami i pod nimi.

Łączę wszystko w całość

Każde z tych zastąpień oferuje dodatkowy sposób na przycięcie nadmiaru z bezpiecznej ramki ograniczającej tekst w internecie. Możesz dostosować pole tekstowe, aby uzyskać precyzyjną prezentację.

Ostrzeżenie: jeśli żadna z powyższych wersji demonstracyjnych nie pokazuje różnic, Twoja przeglądarka nie obsługuje zastąpień.

Podsumowanie

Funkcja CSS @font-face size-adjust to świetny sposób na dostosowanie ramki ograniczającej tekst w układach stron internetowych, który pozwala ulepszyć zamianę czcionek i uniknąć przesunięcia układu. Więcej informacji znajdziesz w tych materiałach:

• Specyfikacja czcionek CSS na poziomie 5
• Dostosowywanie rozmiaru w MDN
• Seamless swap @font-face generator
• Skumulowane przesunięcie układu (CLS) na web.dev
• Nowy sposób na zmniejszenie wpływu wczytywania czcionek: deskryptory czcionek CSS