Den font-optical-sizingCSS egenskapen kan webbläsaren att justera konturerna av teckensnitt glyfer för att göra dem mer läsbara olika storlekar. Till exempel kan mindre text få en tjockare kontur för att öka kontrasten. På baksidan kan större text få något som är mer ”känsligt” för att citera specifikationen.
.element ( font-optical-sizing: none; )Glyfer har konturer?
Dom gör! Faktum är att alla tecken har dem och de skalas med storleken på teckensnittet. Problemet är att en supertunn kontur med liten teckenstorlek kanske inte ger tillräckligt med kontrast för bästa läsbarhet; På liknande sätt kan tjockare konturer i större storlekar ha för mycket vikt och kontrast. font-optical-sizingförsöker rätta till det genom att låta webbläsaren lura med konturen så att den läser bättre i olika skalor. Resultatet blir skarpare text och antingen smalare eller bredare textlängder beroende på teckenstorlek.
Detta fungerar bara på teckensnitt som stöder optisk storlek
Och teckensnitt som stöder optisk storlek är variabla teckensnitt , inklusive Roboto Delta, en variabel version av Googles klassiska Roboto. Ett annat stödjande teckensnitt är Amstelvar. Båda teckensnitten underhålls av Type Network.
Även om ett teckensnitt är variabelt måste det uttryckligen stödja optisk storlek som en funktion.
Ett annat sätt att optiskt storleka teckensnitt
Den font-optical-sizingegenskapen är det mest effektiva sättet att optiskt storlek ett teckensnitt som stöder den. Ett annat sätt är att använda font-variation-settingsegenskapen, som låter dig styra optisk storlek med opsz, vilket är nyckelordet för optisk storlek på variabla teckensnitt som stöder den.
Observera att användning font-variation-settingskräver att du ställer in opszi enlighet med teckenstorleken så att allt skalas ordentligt.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Syntax
font-optical-sizing: auto | none;- Första:
auto - Gäller för: alla element
- Ärvt: ja
- Beräknat värde: specificerat nyckelord
- Animationstyp: diskret
Värden
auto: Detta är standardvärdet. Det gör att webbläsare kan optimera text i olika teckensnittsstorlekar för läsbarhet.none: Detta hindrar webbläsare från att ändra text.
Fastigheten accepterar också globala sökord värden, inklusive inherit, initialoch unset.
Demo
Webbläsarstöd
| IE | Kant | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Nej | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Android-webbläsare | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Allt |
Vidare läsning
- CSS-teckensnittsmodul nivå 4 (redaktörens utkast)
- MDN-dokumentation
- Variabla teckensnitt: Optisk storlek, anpassade axlar och andra nyfikenheter (Responsive Web Typography)