Fondi suuruse kohandamine - CSS-trikid

Anonim

See omadus annab arendajatele võimaluse seada font-sizeelemendi suurus sõltuvalt selle väiketähtede suurusest, mitte suurtähtedest.

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

Sel juhul oleksid fondi väiketähed 11px kõrgused, kuna 22 x .5 = 11.

Fondide laadimisel on tagavarafondi väiketähtede ja äsja laaditud kirjatüübi vahel tõenäoliselt erinev kuvasuhe, seega font-size-adjuston kasulik kontrollida tagasivooluhulka, kui kuulutame uue font-familyja näeme stiilita teksti välku (FOUT).

Allolevas demos on võimalik seda omadust sisse ja välja lülitada, et näidata, kuidas veebifont, nagu Chaparral, erineb varukoopia Timesi tähtede x-kõrgusest ja joondusest. Kuid ole ettevaatlik, seda omadust toetab praegu vaid väike arv brausereid.

Sellel võib olla dramaatiline efekt, kui see on seatud suurtele tekstitekstidele, ja oluliselt parandada värelust, mis tekib varukoopia ja äsja laaditud fondi vahetamisel:

Rohkem informatsiooni

  • MDN
  • W3C

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
Ei 3 Ei Ei Ei

Mobiil / tahvelarvuti

Android Chrome Android Firefox Android iOS-i Safari
Ei Ei Ei Ei