Dostosowanie rozmiaru CSS do @font-face

Możesz teraz dostosować skalę czcionki podczas ładowania, aby znormalizować rozmiary czcionek w dokumencie i zapobiec przesuwaniu układu przy przełączaniu się między czcionkami.

Adam Argyle

Przyjrzyjmy się tej prezentacji, w której font-size to spójny 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 skorygowane i mają niespójny rozmiar końcowy. Przykłady po prawej stronie używają wartości size-adjust, aby zapewnić, że 64px będzie mieć stały rozmiar końcowy.

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

W tym poście omawiamy nowy deskryptor czcionki CSS o nazwie size-adjust. Pokazuje też kilka sposobów na poprawienie i unormowanie rozmiarów czcionek, aby zapewnić płynniejsze działanie, spójne systemy projektowania i bardziej przewidywalny układ strony. Jednym z ważnych przypadków użycia jest optymalizacja renderowania czcionek internetowych w celu zapobiegania całkowitemu przesunięciu układu (CLS).

Obsługa przeglądarek

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

Źródło

Oto interaktywna prezentacja przestrzeni problematycznej. Spróbuj zmienić czcionkę w menu i obserwuj:

  1. różnice wysokości w wynikach.
  2. Atrakcyjne wizualnie treści
  3. Przesuwanie interaktywnych obszarów docelowych (wypadajce 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 size-adjust, aby powiększyć każdy glif do 150% swojego domyślnego rozmiaru.
  3. Dotyczy tylko jednego zaimportowanego kroju pisma.

Użyj wyżej wymienionej czcionki niestandardowej w ten sposób:

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

Łagodzenie CLS dzięki płynnemu zamianie czcionek

Na przykładzie poniżej tego GIF-a zwróć uwagę na przykłady po lewej stronie i zobacz, jak zmienia się czcionka, gdy czcionka się zmienia. To tylko mały przykład z jednym nagłówkiem, ale problem jest bardzo widoczny.

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

Aby usprawnić renderowanie czcionek, warto użyć zamieniania czcionek. Renderuj szybko ładującą się czcionkę systemową, by ta treść była wyświetlana jako pierwsza, a po jej zakończeniu zamień ją na czcionkę internetową. Rozwiązanie to zapewnia korzyści obu stron: treści są widoczne tak szybko, jak to możliwe, a strona ma ładny styl, a użytkownicy nie muszą tracić czasu na ich zapoznawanie. Problem polega jednak na tym, że czasami po wczytaniu czcionka internetowa przesuwa całą stronę, ponieważ wyświetla się ona przy nieco innej wysokości ramki.

więcej treści to większe potencjalne przesunięcie układu przy zamianie czcionek

Ustawienie wartości size-adjust w regułach @font-face powoduje ustawienie globalnego dostosowania znaków dla kroju czcionki. Odpowiednie wyczucie czasu pozwoli zminimalizować wizualną zmianę i płynną zamianę. Aby uzyskać płynne przejście, dostosuj ręcznie lub użyj kalkulatora rozmiarów Malte Ubl.

Wybierz czcionkę internetową Google, by otrzymać 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ł zmieniony w źródłowym kodzie, aż ten sam nagłówek w plikach Cookie i Arial generował ten sam 64px, co plik Press Start 2P. Dopasował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');
}

Kalibruję czcionki

Ty jako autor określasz cele kalibracji w celu normalizacji skali czcionki. Możesz przywrócić normalizację według czasu, zdjęcia lub czcionki systemowej, a następnie dostosować do nich niestandardowe czcionki. Możesz też dostosować czcionki lokalne, aby pasowały do pobranych.

Strategie kalibracji funkcji size-adjust:

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

Przykład 1. Cel zdalny

Weźmy pod uwagę poniższy fragment kodu, który dostosowuje rozmiar czcionki dostępnej lokalnie do rozmiaru niestandardowego atrybutu src. Zdalna czcionka niestandardowa 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 lokalny font Arial dostosowuje się do załadowanego fontu niestandardowego, aby zapewnić płynną wymianę.

Ta strategia ma tę zaletę, że oferuje projektantom i programistom ten sam krój czcionki do stosowania w różnych rozmiarach i typach. Marka jest celem kalibracji. To świetna wiadomość dla systemów projektowania.

Kalkulator Malte używa czcionki marki jako celu. Wybierz czcionkę Google, a my obliczy, jak ją dopasować, aby zmienić ją na czcionkę Google. Oto przykładowy kod CSS robota Roboto z kalkulatora, w którym załadowano plik {8/} o nazwie „Roboto-fallback”:

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

Aby utworzyć w pełni dostosowanie na wielu platformach, zapoznaj się z przykładem poniżej, w którym podano 2 dostosowane lokalne czcionki zastępcze w zależności od czcionki 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. Lokalne miejsce docelowe

Przyjrzyjmy się temu fragmentowi kodu, który dopasowuje niestandardową czcionkę marki do formatu Adobe:

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

Ta strategia ma tę zaletę, że renderowanie odbywa się bez żadnych korekt, a następnie dopasowuje się do niego czcionki.

Dostrojenie ascent-override, descent-override i line-gap-override

Jeśli ogólne skalowanie glifów nie jest wystarczające do dostosowania strategii projektowania lub wczytywania, oto kilka bardziej precyzyjnych opcji dostrajania, które sprawdzą się wraz z funkcją size-adjust. Te właściwości ascent-override, descent-override i line-gap-override są obecnie zaimplementowane w Chromium 87 i nowszych oraz w Firefoksie od wersji 89.

nożyczki nad i pod słowem, które zastępują, pokazujące obszary, do których można przyciąć funkcje

ascent-override

Obsługa przeglądarek

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: nieobsługiwane.

Źródło

Opis ascent-override określa wysokość nad podstawą czcionki.

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

Nad wielką literą A i O w czerwonym nagłówku znajduje się spacja, natomiast niebieski nagłówek został zmieniony w taki sposób, że wysokość reklamy mieści się w ramce ograniczającej.

descent-override

Obsługa przeglądarek

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: nieobsługiwane.

Źródło

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 (bez korekty) ma odstęp pod punktami odniesienia D i O, a niebieski nagłówek został dostosowany w taki sposób, aby litery dobrze przylegały do linii bazowej.

line-gap-override

Obsługa przeglądarek

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: nieobsługiwane.

Źródło

Deskryptor line-gap-override określa dane o przerwach między wierszami dla czcionki. Jest to zalecana odległość 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 (bez korekty) nie zawiera elementu line-gap-override, zasadniczo ma wartość 0%, a niebieski nagłówek został zmieniony o 50%, tworząc odpowiednio odstępy i odstępy nad i pod literami.

Podsumowanie

Każde z tych zastąpień zapewnia dodatkowy sposób usunięcia nadmiarowych elementów z bezpiecznej ramki ograniczającej tekst w internecie. Możesz dostosować pole tekstowe do precyzyjnego wyświetlania.

Podsumowanie

Funkcja CSS @font-face size-adjust to ciekawy sposób na dostosowanie pola ograniczającego tekst w układzie strony internetowej, aby ulepszyć proces wymiany czcionki i uniknąć zmiany układu dla użytkowników. Więcej informacji znajdziesz w tych materiałach:

Zdjęcie: Kristian Strand na Unsplash