Font-size-justera - CSS-tricks

Anonim

Den här egenskapen ger utvecklare möjlighet att ställa in font-sizeett element beroende på storleken på små bokstäver, snarare än stora bokstäver.

.element ( font-size: 22px; font-size-adjust: .5; )

I det här fallet skulle de små bokstäverna i teckensnittet vara 11 pixlar höga, eftersom 22 x, 5 = 11.

När du läser in teckensnitt kommer det troligtvis att vara ett annat bildförhållande mellan små bokstäver i ett reservteckensnitt och det nyligen laddade typsnittet, så det font-size-adjustär användbart att kontrollera mängden återflöde när vi förklarar en ny font-familyoch ser Flash of Unstyled Text (FOUT).

I demonstrationen nedan är det möjligt att slå på och av den här egenskapen för att visa hur ett webbteckensnitt som Chaparral skiljer sig från x-höjd och justering av tecken i Times, reservteckensnittet. Men se upp, den här egenskapen stöds bara av ett litet antal webbläsare just nu.

Detta kan ha dramatiska effekter när det ställs in på stora delar av brödtexten och avsevärt förbättra det flimmer som uppstår när du växlar mellan reserv och det nyligen laddade teckensnittet:

Mer information

  • MDN
  • W3C

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
Nej 3 Nej Nej Nej

Mobil / surfplatta

Android Chrome Android Firefox Android iOS Safari
Nej Nej Nej Nej