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 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, łączne przesunięcie układu (CLS).

Oto interaktywna prezentacja do problematycznej przestrzeni. Spróbuj zmienić krój czcionki w menu i zobacz:

1. różnice wysokości w wynikach.
2. Atrakcyjne wizualnie treści
3. Przenoszenie interaktywnych obszarów docelowych (menu przesuwa się po ekranie).

Jak skalować czcionki za pomocą funkcji 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 do skalowania w górę każdego glifu do 150% ich rozmiaru domyślnego.
3. Dotyczy tylko jednego zaimportowanego kroju pisma.

Użyj tego niestandardowego kroju:

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 i problem ten jest bardzo zauważalny.

Aby poprawić renderowanie czcionki, warto użyć techniki zamiany czcionki. Renderuj szybko ładujące się elementy będzie wyświetlana jako pierwsza, a potem zamień ją na czcionkę internetową po zakończeniu wczytywania. Dzięki temu można korzystać z obu rozwiązań: będzie ona widoczna od razu, a strona będzie miała ładny wygląd bez poświęcanie czasu użytkowników na tworzenie treści. Problem w tym, że czasami po wczytaniu czcionka przesuwa całą stronę, ponieważ jest wyświetlana trochę innej wysokości ramki.

Umieszczenie atrybutu size-adjust w regule @font-face powoduje ustawienie glifu globalnego dla kroju czcionki. W odpowiednim czasie ograniczymy do minimum płynna zamiana danych. Aby uzyskać płynne przejście, dostosuj ręcznie lub użyj tego kalkulatora do zmiany rozmiaru autorstwa Malte Ubl.

Na początku tego posta problem z rozmiarem czcionki został rozwiązany metodą prób i błędów. Nagłówek size-adjust został przesuwany w kodzie źródłowym do tego samego nagłówka w Mechanizmy Cookie i Arial wyrenderowały tę samą 64px co Press Start 2P – naturalnie. 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');
}

Kalibruję czcionki

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. Zdalny cel:
   Dostosuj czcionki lokalne do pobranych czcionek.
2. Cel lokalny:
   dostosowywanie pobranych czcionek do lokalnych czcionek docelowych.

Przykład 1: cel zdalny

Rozważ ten fragment kodu, który dostosowuje rozmiar czcionki dostępnej lokalnie do czcionki niestandardowej. Celem jest zdalne, niestandardowe czcionki kalibracji, czcionki marki, np.:

@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 projektantom i programistom do określania rozmiaru i typografii. Marka jest celem kalibracji. To świetna wiadomość dla systemów projektowania.

Kalkulator Malte'a działa również wtedy, gdy jako docelowy wybrany jest krój marki. Wybierz czcionkę Google, a my obliczy sposób jej dostosowania do zamieńcie się z nim. Oto przykładowy kod CSS Roboto z pliku kalkulator, gdzie załadowano plik {4/} i nazwał go „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.

Dostrajanie dokładne w przypadku usług 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. ascent-override descent-override, oraz line-gap-override są obecnie zaimplementowane w Chromium w wersji 87 i nowszych oraz w Firefoksie od wersji 89.

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

Nad wielką literą A i O w czerwonym nagłówku znajduje się spacja, a Poprawiono niebieski nagłówek tak, aby był duży wysokość przylega do całkowania ramkę ograniczającą.

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 (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 luka między wierszami lub przekierowanie zewnętrzne.

@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 zastąpień zapewnia dodatkowy sposób usuwania nadmiarowych zasobów bezpiecznej ramki ograniczającej tekst. Możesz dostosować pole tekstowe do precyzyjnego wyświetlania.

Podsumowanie

Funkcja CSS @font-face size-adjust to świetny sposób ramki ograniczającej tekst w układach internetowych, co usprawnia zamianę czcionek. dzięki czemu unikniesz przesunięcia układu. Aby dowiedzieć się więcej, zapoznaj się z tymi zasobami:

• Czcionki CSS – poziom 5 Dane techniczne
• Dostosowywanie rozmiaru w MDN
• Płynna zamiana @font-face generatora
• Skumulowane przesunięcie układu (CLS) w web.dev
• Nowy sposób zmniejszenia wpływu wczytywania czcionek: deskryptory czcionek CSS

Zdjęcie: Kristian Strand na Unsplash