Dostosowanie rozmiaru CSS do @font-face

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

Rozważ ten przykład, w którym element font-size ma wartość 64px, a jedyną różnicą między tymi nagłówkami jest element font-family. Przykłady po lewej stronie nie zostały dopasowane i mają niespójne rozmiary końcowe. 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 poście omawiamy nowy opis kroju 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 zastosowań jest optymalizacja renderowania czcionek internetowych w celu zapobiegania kumulatywnemu przesunięciu układu (CLS).

Oto interaktywna prezentacja problemu. Spróbuj zmienić czcionkę za pomocą menu i obserwuj:

1. Różnice wysokości w wynikach.
2. treści, które są chaotyczne wizualnie;
3. Przesuwanie interaktywnych obszarów docelowych (wypadajce menu przeskakuje).

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% ich 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";
}

Ograniczanie CLS dzięki płynnej wymianie czcionek

Na poniższym GIF-ie możesz zobaczyć przykłady po lewej stronie i to, jak zmienia się obraz po zmianie czcionki. To tylko mały przykład z jednym nagłówkiem, ale problem jest bardzo widoczny.

Aby poprawić renderowanie czcionki, warto użyć techniki zamiany czcionki. Najpierw renderuj szybko wczytywaną czcionkę systemową, aby wyświetlić treść, a potem zastąp ją czcionką internetową, gdy ta się załaduje. Dzięki temu możesz połączyć zalety obu rozwiązań: treści są widoczne tak szybko, jak to możliwe, a Ty otrzymujesz ładnie sformatowaną stronę, nie tracąc czasu użytkownika na treści. Problem polega jednak na tym, że czasami podczas wczytywania czcionki internetowej przesuwa się cała strona, ponieważ ma ona nieco inną wysokość.

Ustawienie wartości size-adjust w regułach @font-face powoduje ustawienie globalnego dostosowania znaków dla kroju czcionki. Wybór odpowiedniego momentu spowoduje minimalną zmianę wizualną, czyli płynne przejście. Aby uzyskać płynne przejście, dostosuj ręcznie lub użyj kalkulatora rozmiarów Malte Ubl.

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

Kalibrowanie czcionek

Jako autor określasz wartości kalibracji do normalizacji skali czcionki. Możesz znormalizować czcionkę Times, Arial lub systemową, a potem dostosować czcionki niestandardowe. Możesz też dostosować czcionki lokalne, aby pasowały do pobranych.

Strategie kalibracji size-adjust:

1. Odległy cel:
   dostosowywanie czcionek lokalnych do pobranych czcionek.
2. Cel lokalny:
   dostosowywanie pobranych czcionek do lokalnych czcionek docelowych.

Przykład 1. Cel zdalny

Rozważ użycie tego fragmentu kodu, który dostosowuje lokalnie dostępną czcionkę do rozmiaru odpowiadającego czcionce niestandardowej z zewnętrznego źródła. 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 w różnych typach. Marka jest celem kalibracji. To świetna wiadomość dla systemów projektowania.

Kalkulator Malte używa czcionki marki jako celu. Wybierz czcionkę Google, a program obliczy, jak dostosować Arial, aby można było go zastąpić wybraną czcionką. Oto przykład kodu CSS czcionki Roboto z kalkulatora, w którym czcionka Arial jest wczytana i nazwana „Roboto-fallback”:

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

Aby utworzyć dostosowanie na wszystkich platformach, zapoznaj się z tym przykładem, który zawiera 2 dostosowane czcionki lokalne na wypadek, gdyby czcionka marki nie była dostępna.

@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. Docelowa grupa lokalna

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

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 znaków nie wystarcza do dostosowania projektu lub strategii wczytywania, możesz skorzystać z dodatkowych opcji dostosowania, które działają razem z size-adjust. Właściwości ascent-override, descent-override i line-gap-override są obecnie wdrażane w Chromium 87 i nowszych oraz w Firefoxie 89 i nowszych.

ascent-override

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

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

Czerwony nagłówek (niedostosowany) ma przestrzeń nad literami A i O, natomiast niebieski nagłówek został dostosowany tak, aby wysokość pasowała do całego ogranicznika.

descent-override

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 (niezmodyfikowany) ma przestrzeń pod literami D i O w podstawie, a niebieski nagłówek został tak dostosowany, aby litery mieściły się w podstawie.

line-gap-override

Deskryptor line-gap-override definiuje wielkość odstępu 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 (nieprzesunięty) nie ma line-gap-override, czyli jest w zasadzie na poziomie 0%, podczas gdy niebieski nagłówek został przesunięty w górę o 50%, co odpowiednio tworzy przestrzeń nad i pod literami.

Podsumowanie

Każde z tych ustawień zastępczych to dodatkowy sposób na przycięcie nadmiaru treści w bezpiecznym obszarze tekstowym. 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. Aby dowiedzieć się więcej, zapoznaj się z tymi zasobami:

• Specyfikacja czcionek CSS poziomu 5
• Dostosowywanie rozmiaru w MDN
• Płynna wymiana generatora @font-face
• Skumulowane przesunięcie układu (CLS) w web.dev
• Nowy sposób zmniejszania wpływu wczytywania czcionek: opisy czcionek w CSS

Zdjęcie: Kristian Strand na Unsplash