font-size-adjust-ominaisuus

Ominaisuus font-size-adjust mahdollistaa fontin koon hallinnan, muuttumattomalla font-size (kasvattaa tai pienentää).

Sovellus: olkoon font-family asettanut kaksi fonttia pilkulla erotettuna, esimerkiksi, Georgia, "Times New Roman". Olkoon käyttäjän tietokoneessa ei ole Georgia-fonttia - tässä tapauksessa "Times New Roman" tulee käyttöön. Kuitenkin, meitä odottaa ongelma - samalla arvolla font-size fontit näyttävät erilaisilta. Alla olevassa esimerkissä molemmille kappaleille on asetettu font-size 16px, mutta eri font-family. Katso, kuinka koet eroavat:

html<p style="font-size: 16px; font-family: Georgia;">
  Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';">
  Lorem ipsum dolor sit amet.
</p>

Результат:

Tämä johtuu siitä, että näytettävä fontin koko riippuu suuremmalta osin ei ominaisuudesta font-size, joka määrittää vain fontin yleisen koon, vana suhteesta ominaisuuden font-size arvojen ja x-height suuruuden välillä (x-height - tämä on ero pienen kirjaimen "x" ja suuren kirjaimen "X" koon välillä tietylle fontille).

Tätä suhdetta kutsutaan fontin aspektiksi ja se lasketaan kaavalla: aspekti = font-size / x-height.

Kokojen ongelman ratkaisee ominaisuus font-size-adjust (se mahdollistaa fontin aspektin muuttamisen), joka pakottaa toisen fontin näyttämään samankokoiselta kuin ensimmäinen.

Tehdään niin, että Times New Roman -fontti on samankokoinen kuin Georgia. Georgia-fontin aspekti on meille tiedossa - se on 0.5 (katso alla oleva taulukko).

Asetetaan font-size-adjust tekstille Times New Romanilla arvoksi 0.5 ja näemme, että toisesta tekstistä tuli samankokoinen kuin ensimmäinen:

html<p style="font-size: 16px; font-family: Georgia;">
  Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
  Lorem ipsum dolor sit amet.
</p>

Результат:

Syntaksi

cssvalitsija {
  font-size-adjust: luku | none;
}

Arvot

Oletusarvo: none.

Kuinka määrittää fontin aspektin arvo?

Katso katkelma W3C:n spesifikaatiosta: Valittujen fonttien mittasuhde (aspekti) voidaan laskea vertaamalla samaa tekstiä, mutta eri font-size-adjust -arvolla. Jos ominaisuuden arvo on valittu oikein, niin samalla fontin koolla teksti pysyy muuttumattomana kaikille sivulla käytetyille fonteille.

Annan tuntemani aspektin arvot joillekin fonteille: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58.

Esimerkki

Vertaa kuinka teksti näyttää eri font-size-adjust -arvoilla ja samalla font-size ja font-family:

html<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: none;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: 0.5;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';  font-size-adjust: 0.6;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Результат:

Esimerkki . Soveltaminen todellisessa elämässä

Alla oleva koodi tekee niin, että jos käyttäjän tietokoneessa ei ole Georgia -fonttia, käyttöön tuleva Times New Roman -fontti on samankokoinen kuin Georgia:

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>

cssp {
  font-size: 16px;
  font-family: Georgia, "Times New Roman";
  font-size-adjust: 0.5;
}

Результат: