CSS font-size-adjust jest teraz w stanie Baseline

Rachel Andrew

Data publikacji: 23 lipca 2024 r.

Właściwość CSS font-size-adjust jest już dostępna w Chrome i stanowi element wersji podstawowej z nowymi funkcjami. Ta właściwość może zapobiegać zmianom układu podczas wczytywania czcionek zastępczych oraz zapewniać czytelność czcionek zastępczych przy mniejszych rozmiarach czcionki. Usługa font-size-adjustjest częścią Interop 2024, więc jest to kolejny krok w kierunku poprawy interoperacyjności platformy internetowej.

Problem

Porównując 2 czcionki o tym samym rozmiarze, możesz zauważyć, że wyświetlany tekst może zajmować bardzo różne ilości miejsca w zależności od kształtu i wielkości znaków. Na przykład w tym demo tekst jest wyświetlany w czcionkach Verdana i Arial, obie o wymiarach 16 pikseli.

Różnica w rozmiarze wynika z tego, że wartość proporcji, czyli wysokość małych liter w porównaniu z wielkimi literami w danej czcionce, różni się w zależności od czcionki.

Może to spowodować 2 problemy, gdy jako czcionka zapasowa używany jest font o innej wartości aspektu. Po pierwsze, zmieni się ilość miejsca zajmowanego przez czcionkę. Po drugie, wybrana czcionka zastępcza może być mniej czytelna niż ta określona jako pierwsza, zwłaszcza w mniejszych rozmiarach. Dzieje się tak, ponieważ względna wysokość małych i wielkich liter jest kluczowym czynnikiem wpływającym na czytelność.

Jak działa font-size-adjust

Właściwość font-size-adjust umożliwia dostosowanie czcionki zastępczej, aby lepiej pasowała do pierwszej czcionki. Ten przykład pokazuje 2 fonty wyświetlane wcześniej. Tym razem drugi z nich został dostosowany do pierwszego.

W tym przykładzie użyto pojedynczej wartości liczbowej, która dostosowuje czcionki za pomocą domyślnych danych czcionki ex-height. Jest to stosunek wysokości x (wysokość litery x w wersalce) do rozmiaru czcionki. Możesz też określić użytą metrykę czcionek. W następnym przykładzie czcionki zostały znormalizowane za pomocą słowa kluczowego ch-width, a nie numeru.

Aby zobaczyć wszystkie możliwe wartości, zapoznaj się z dokumentacją MDN dotyczącą elementu font-size-adjust.

Warto sprawdzić, jak wygląda Twoja witryna z czcionką zastępczą, i sprawdzić, czy niewielkie dostosowanie font-size-adjust może poprawić wrażenia użytkowników, którzy korzystają z czcionki zastępczej, zwłaszcza że jest ona teraz dostępna wszędzie.