Gdy czcionki internetowe się wczytują, często zastępują czcionkę zastępczą, która ma inne wymiary, nawet jeśli obie mają ustawioną tę samą wartość font-size. Powoduje to „przesunięcie układu” (skumulowane przesunięcie układu) i może sprawić, że tekst będzie nieczytelny, jeśli małe litery czcionki zastępczej (wysokość x) znacznie różnią się od preferowanej czcionki.
Właściwość font-size-adjust rozwiązuje ten problem, normalizując rozmiar czcionki na podstawie określonego wskaźnika (zwykle wysokości x), dzięki czemu tekst zajmuje tę samą przestrzeń wizualną niezależnie od tego, która czcionka jest obecnie aktywna.
Etapy wdrażania
1. Określanie formatu obrazu preferowanej czcionki
Aby znormalizować czcionki zastępcze, musisz znać „wartość proporcji” (stosunek małych liter do rozmiaru czcionki) czcionki podstawowej.
- Automatyczne wykrywanie (zalecane): użyj słowa kluczowego
from-font, aby umożliwić przeglądarce wyodrębnienie współczynnika z podstawowej czcionki internetowej. - Obliczenia ręczne: jeśli znasz konkretną wartość (np. 0,545 dla czcionki Verdana), możesz podać ją bezpośrednio, aby uzyskać większą kontrolę.
2. Zastosuj font-size-adjust do kontenera tekstu
Zastosuj właściwość do elementu lub kontenera nadrzędnego. Dzięki temu, jeśli czcionka podstawowa nie zostanie wczytana lub jest w trakcie wczytywania, czcionka zastępcza zostanie przeskalowana tak, aby odpowiadała rozmiarowi czcionki podstawowej.
.text-content {
/* Define your font stack as usual */
font-family: "MyWebFont", "Arial", sans-serif;
font-size: 1rem;
/* MANDATORY: Normalize the font size based on the primary font's x-height.
This ensures that if 'Arial' is used as a fallback, it is scaled
to match the x-height of 'MyWebFont'. */
font-size-adjust: from-font;
}
3. (Opcjonalnie) Dostosowywanie ustawień pod kątem konkretnych danych
Chociaż wysokość x jest domyślna i najczęściej używana, możesz normalizować według innych danych, takich jak cap-height (przydatne w przypadku nagłówków pisanych samymi wielkimi literami) lub ch-width (przydatne w przypadku czcionek o stałej szerokości znaków).
h1 {
/* Normalize based on the height of capital letters */
font-size-adjust: cap-height from-font;
}
4. Sprawdzanie stabilności wizualnej
Upewnij się, że wartość font-size-adjust prawidłowo wyrównuje kreację zastępczą. Możesz to sprawdzić, tymczasowo blokując czcionkę internetową lub dostosowując deklarację font-family w Narzędziach deweloperskich w przeglądarce i sprawdzając, czy układ tekstu pozostaje stabilny.
Strategie zastępcze
W przeglądarkach, które nie obsługują właściwości font-size-adjust, czcionka będzie renderowana w domyślnej skali. Może to spowodować przesunięcia układu lub zmiany czytelności podczas zamiany czcionek.
Aby rozwiązać ten problem bez użycia font-size-adjust, możesz użyć deskryptorów @font-face size-adjust, ascent-override i descent-override, aby ręcznie dostosować czcionki zastępcze, chociaż są one bardziej złożone do obliczenia niż pojedyncza wartość font-size-adjust.