Właściwość font-optical-sizingCSS umożliwia przeglądarce dostosowanie konturu glifów czcionek, aby były bardziej czytelne w różnych rozmiarach. Na przykład mniejszy tekst może uzyskać grubszy kontur, aby zwiększyć kontrast. Z drugiej strony, większy tekst może zawierać coś, co jest bardziej „delikatne” przy cytowaniu specyfikacji.
.element ( font-optical-sizing: none; )Glify mają kontury?
Robią! W rzeczywistości wszystkie glify mają je i skalują się wraz z rozmiarem czcionki. Problem polega na tym, że super cienki kontur przy małym rozmiarze czcionki może nie zapewniać wystarczającego kontrastu, aby uzyskać najlepszą czytelność; podobnie, grubsze kontury przy większych rozmiarach mogą mieć zbyt dużą wagę i kontrast. font-optical-sizingpróbuje to naprawić, pozwalając przeglądarce majstrować przy konspekcie, aby był lepiej widoczny w różnych skalach. Rezultatem będzie wyraźniejszy tekst i węższa lub szersza długość tekstu, w zależności od rozmiaru czcionki.
Działa to tylko w przypadku czcionek obsługujących rozmiar optyczny
A czcionki obsługujące rozmiar optyczny to czcionki zmienne , w tym Roboto Delta, zmienna wersja klasycznego Roboto firmy Google. Inną czcionką pomocniczą jest Amstelvar. Obie czcionki są obsługiwane przez Type Network.
Nawet jeśli czcionka jest zmienna, musi jawnie obsługiwać rozmiar optyczny jako funkcję.
Inny sposób na optyczne dopasowanie rozmiaru czcionek
font-optical-sizingNieruchomość jest najbardziej skutecznym sposobem optycznie rozmiaru czcionki, które obsługuje. Innym sposobem jest użycie font-variation-settingswłaściwości, która umożliwia kontrolowanie rozmiaru optycznego za pomocą opsz, która jest słowem kluczowym do określania rozmiaru optycznego w zmiennych czcionkach, które ją obsługują.
Zauważ, że użycie font-variation-settingswymaga ustawienia opszzgodnie z rozmiarem czcionki, aby wszystko było prawidłowo skalowane.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Składnia
font-optical-sizing: auto | none;- Inicjał:
auto - Dotyczy: wszystkich elementów
- Odziedziczone: tak
- Wartość obliczona: określone słowo kluczowe
- Typ animacji: dyskretna
Wartości
auto: To jest wartość domyślna. Umożliwia przeglądarkom optymalizację tekstu przy różnych rozmiarach czcionek pod kątem czytelności.none: Zapobiega to modyfikowaniu tekstu przez przeglądarki.
Obiekt akceptuje również globalnych wartości słów kluczowych, w tym inherit, initiali unset.
Próbny
Wsparcie przeglądarki
| TO ZNACZY | Brzeg | Firefox | Chrom | Safari | Opera |
|---|---|---|---|---|---|
| Nie | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Przeglądarka Android | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Wszystko |
Dalsza lektura
- Moduł czcionek CSS, poziom 4 (wersja robocza redakcji)
- Dokumentacja MDN
- Zmienne czcionki: rozmiar optyczny, niestandardowe osie i inne ciekawostki (typografia responsywna)