Font-size-adjust - CSS-trucs

Anonim

Deze eigenschap geeft ontwikkelaars de mogelijkheid om de font-sizevan een element in te stellen afhankelijk van de grootte van de kleine letters, in plaats van de hoofdletters.

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

In dit geval zouden de kleine letters van het lettertype 11px hoog zijn, aangezien 22 x .5 = 11.

Bij het laden van lettertypen is er waarschijnlijk een andere aspectverhouding tussen de kleine letters van een fallback-lettertype en het nieuw geladen lettertype, dus het font-size-adjustis handig om de hoeveelheid reflow te regelen wanneer we een nieuwe declareren font-familyen de Flash of Unstyled Text (FOUT) zien.

In de onderstaande demo is het mogelijk om deze eigenschap aan en uit te zetten om te laten zien hoe een weblettertype zoals Chaparral verschilt van de x-hoogte en uitlijning van tekens in Times, het fallback-lettertype. Maar let op, deze eigenschap wordt momenteel slechts door een klein aantal browsers ondersteund.

Dit kan dramatische effecten hebben wanneer het wordt ingesteld op grote delen van de hoofdtekst, en aanzienlijk de flikkering verbeteren die optreedt bij het schakelen tussen terugval en het nieuw geladen lettertype:

Meer informatie

  • MDN
  • W3C

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
Nee 3 Nee Nee Nee

Mobiel / tablet

Android Chrome Android Firefox Android iOS Safari
Nee Nee Nee Nee