Podczas łączenia różnych rodzin czcionek, na przykład przy wstawianiu fragmentów kodu w tekście lub przełączaniu rodzin czcionek w różnych motywach, różnice w „wysokości x” (wysokości małych liter) mogą sprawić, że jedna czcionka będzie wydawać się znacznie mniejsza lub większa od drugiej. Może to prowadzić do pogorszenia czytelności i przesunięć układu.
Właściwość font-size-adjust umożliwia normalizację wizualnego rozmiaru tekstu przez dostosowanie rozmiaru czcionki na podstawie określonej metryki czcionki (zwykle wysokości x).
Etapy wdrażania
- OBOWIĄZKOWO: zastosuj
font-size-adjustdo elementów, w przypadku których spójność czcionki jest kluczowa, takich jak kontenery używające czcionek internetowych lub bloki z różnymi rodzinami czcionek. - OBOWIĄZKOWO: używaj słowa kluczowego
from-fontw elementach, aby automatycznie dopasowywać rozmiar czcionki w elementach zagnieżdżonych do proporcji czcionki podstawowej. - OBOWIĄZKOWO: użyj określonej liczbowej wartości zastępczej formatu obrazu dla
font-size-adjust(np.font-size-adjust: 0.5), aby znormalizować proporcje niezależnie, gdy proporcje czcionki, na których się opierasz, pochodzą z różnych motywów.
Przykład: automatyczna normalizacja wysokości x
Najlepszym rozwiązaniem jest użycie from-font. Wyodrębnia format obrazu wysokości x z pierwszej dostępnej czcionki i stosuje go do czcionek w elementach podrzędnych.
.content-area {
font-family: "MyCustomWebFont";
/* Automatically extract and apply x-height ratio from MyCustomWebFont */
font-size-adjust: from-font;
}
.content-area span{
font-family: "MyOtherCustomWebFont"
}
Przykład: określanie konkretnej wysokości x
Jeśli czcionka, którą chcesz dostosować, nie jest czcionką podrzędną czcionki, na której opiera się rozmiar, określ wartość, o którą chcesz dostosować wysokość x.
.theme{
font-family: Verdana, sans-serif;
}
.theme.alternate{
font-family: Times;
/* Set to the aspect ratio (x-height / font-size) of the primary font */
font-size-adjust: 0.51;
}
Strategie zastępcze
MANDATORY: In browsers that do not support font-size-adjust, fonts will render at their natural font-size value. Aby rozwiązać ten problem, musisz podać prawidłową strategię zastępczą dla nieobsługiwanych przeglądarek, używając bloku @supports:
- Użyj
@supports not (font-size-adjust: from-font), aby wykryć obsługęfont-size-adjusti zapewnić style zastępcze (np. dostosowaną wysokość linii lub rozmiar czcionki). - Wybierz czcionki o podobnej wysokości x do czcionki podstawowej.
- Zastosuj określone zastąpienia
font-sizeiline-heightw przypadku alternatywnych i zagnieżdżonych rodzin czcionek.
/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
.content-area {
/* Manual adjustment for browsers without support (if needed) */
line-height: 1.6;
font-size: 1.2rem;
}
}