Dostosowanie rozmiaru CSS do @font-face

Podczas ładowania czcionki internetowej możesz teraz dostosować jej skalę, aby znormalizować rozmiary czcionek w dokumencie i zapobiec przesunięciu układu podczas przełączania czcionek.

Adam Argyle

Rozważmy ten przykład, w którym font-size jest stałą wartością 64px, a jedyną różnicą między poszczególnymi 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 znaku size-adjust, aby zapewnić, że 64px będzie zawsze ostatecznym rozmiarem.

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

W tym poście omawiamy nowy deskryptor CSS font-face o nazwie size-adjust. Pokazuje też kilka sposobów na poprawienie i normalizację rozmiarów czcionek, aby zapewnić użytkownikom większą wygodę, 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

  • Chrome: 92.
  • Edge: 92.
  • Firefox: 92.
  • Safari: 17.

Source

Oto interaktywna wersja demonstracyjna problemu. Spróbuj zmienić krój pisma za pomocą menu i zobacz:

  1. Różnice wysokości w wynikach.
  2. nagłe zmiany treści, które mogą być nieprzyjemne dla oka;
  3. Przesuwające się interaktywne obszary docelowe (menu się przesuwa).

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 funkcji size-adjust, aby powiększyć każdy glif do 150% domyślnego rozmiaru.
  3. Dotyczy tylko jednego importowanego kroju pisma.

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

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

Ograniczanie CLS dzięki płynnemu przełączaniu czcionek

Na poniższym GIF-ie zobaczysz przykłady po lewej stronie i jak zmienia się tekst po zmianie czcionki. To tylko mały przykład z jednym elementem nagłówka, a problem jest bardzo widoczny.

Przykład po lewej stronie zawiera przesunięcie układu, a przykład po prawej stronie nie.

Aby poprawić renderowanie czcionek, warto zastosować zamianę czcionek. Renderuj szybko wczytującą się czcionkę systemową, aby najpierw wyświetlić treść, a potem zastąpić ją czcionką internetową, gdy ta się wczyta. Dzięki temu uzyskasz najlepsze rozwiązanie: treść będzie widoczna jak najszybciej, a strona będzie miała atrakcyjny wygląd bez poświęcania czasu użytkownika na treść. Problem polega jednak na tym, że czasami po wczytaniu czcionki internetowej cała strona przesuwa się, ponieważ ma ona nieco inną wysokość.

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

Umieszczenie znaku size-adjust w regule @font-face powoduje ustawienie globalnego dostosowania glifu dla kroju czcionki. Odpowiednie wyczucie czasu pozwoli zminimalizować zmiany wizualne i zapewnić płynne przejście. Aby utworzyć płynne przejście, dostosuj rozmiar ręcznie lub skorzystaj z tego kalkulatora dostosowywania rozmiaru autorstwa Malte Ubla.

Wybierz czcionkę internetową Google i uzyskaj wstępnie dostosowany fragment kodu @font-face.

Na początku tego posta problem z rozmiarem czcionki został rozwiązany metodą prób i błędów. size-adjust został przesunięty w kodzie źródłowym, aż ten sam nagłówek w Cookie i Arial renderował ten sam 64px co Press Start 2P. Dopasowałem 2 czcionki do docelowego rozmiaru.

@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');
}

Kalibracja czcionek

Autor określa cele kalibracji na potrzeby normalizacji skali czcionki. Możesz ujednolicić czcionki, wybierając Times, Arial lub czcionkę systemową, a następnie dostosować czcionki niestandardowe. Możesz też dostosować lokalne czcionki, aby pasowały do pobranych.

Strategie kalibracji size-adjust:

  1. Zdalny element docelowy:
    dostosuj czcionki lokalne do pobranych czcionek.
  2. Lokalny cel:
    dostosuj pobrane czcionki do czcionek lokalnych.

Przykład 1. Cel zdalny

Rozważ użycie tego fragmentu kodu, który dostosowuje lokalnie dostępną czcionkę do rozmiaru czcionki niestandardowej z zewnętrznego źródła. Czcionka niestandardowa z zewnętrznego źródła jest celem kalibracji, np. 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 Arial dostosowuje się w oczekiwaniu na załadowanie niestandardowej czcionki, aby zapewnić płynne przejście.

Zaletą tej strategii jest to, że projektanci i programiści mają do dyspozycji tę samą czcionkę do określania rozmiaru i typografii. Marka jest celem kalibracji. To świetna wiadomość dla systemów projektowania.

Kalkulator Malte działa w ten sam sposób. Wybierz czcionkę Google, a my obliczymy, jak dostosować czcionkę Arial, aby można było ją bezproblemowo zastąpić. 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");
}

Aby utworzyć w pełni wieloplatformowe dostosowanie, zapoznaj się z tym 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. Lokalny cel

Rozważ użycie tego fragmentu 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 dostosowań, a następnie dostosowywanie wszystkich przychodzących czcionek do tego renderowania.

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, możesz skorzystać z tych opcji precyzyjnego dostrajania, które działają w połączeniu z size-adjust. Właściwości ascent-override, descent-override, i line-gap-override są obecnie zaimplementowane w Chromium 87+ i Firefox 89+.

nożyczek nad słowem „overrides” (zastępuje), pokazując obszary, które można przyciąć.

ascent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

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 (nieprzekształcony) ma odstępy nad wielkimi literami A i O, a niebieski nagłówek został przekształcony tak, aby wysokość wielkich liter ściśle przylegała do ogólnego pola ograniczającego.

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

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 (nieprzekształcony) ma odstęp pod liniami bazowymi liter D i O, a niebieski nagłówek został przekształcony tak, aby litery przylegały do linii bazowej.

line-gap-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

Deskryptor line-gap-override określa wskaźnik odstępu między wierszami dla czcionki. Jest to zalecana przez czcionkę przerwa między wierszami lub zewnętrzny odstęp między wierszami.

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

Czerwony nagłówek (bez korekty) nie ma wartości line-gap-override, czyli jest na poziomie 0%, a niebieski nagłówek został skorygowany w górę o 50%, co spowodowało powstanie odpowiedniej przestrzeni nad i pod literami.

Łączę wszystko w całość

Każde z tych zastąpień stanowi dodatkowy sposób na przycięcie nadmiaru z bezpiecznego pola tekstowego w internecie. Możesz dostosować pole tekstowe, aby uzyskać precyzyjną prezentację.

Podsumowanie

Funkcja CSS @font-face size-adjust to świetny sposób na dostosowanie pola ograniczającego tekst w układach stron internetowych, aby poprawić komfort przełączania czcionek, a tym samym uniknąć przesunięcia układu dla użytkowników. Więcej informacji znajdziesz w tych materiałach:

Zdjęcie: Kristian Strand, Unsplash