Skriftstørrelsesjustering - CSS-tricks

Anonim

Denne egenskab giver udviklere mulighed for at indstille font-sizeet element afhængigt af størrelsen på små bogstaver snarere end de store bogstaver.

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

I dette tilfælde vil små bogstaver i skrifttypen være 11 pixel i højden, da 22 x .5 = 11.

Når der indlæses skrifttyper, er der sandsynligvis et andet størrelsesforhold mellem små bogstaver i en font-size-adjusttilbagefaldsskrifttype og det nyindlæste skrifttype, så det er nyttigt at kontrollere mængden af ​​gennemstrømning, når vi erklærer en ny font-familyog ser Flash of Unstyled Text (FOUT).

I demoen nedenfor er det muligt at skifte denne egenskab til og fra for at vise, hvordan en webskrifttype som Chaparral adskiller sig fra x-højden og justeringen af ​​tegn i Times, reservefonten. Men pas på, denne egenskab understøttes i øjeblikket kun af et lille antal browsere.

Dette kan have dramatiske effekter, når det indstilles på store dele af brødtekst, og forbedrer den flimmer, der opstår, når der skiftes mellem fallback og den nyindlæste skrifttype væsentligt:

Mere information

  • MDN
  • W3C

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
Ingen 3 Ingen Ingen Ingen

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
Ingen Ingen Ingen Ingen