Egenskapen font-size-adjust

Egenskapen font-size-adjust låter dig kontrollera teckenstorleken, oförändrad font-size (öka eller minska).

Tillämpning: låt i font-family två teckensnitt anges separerade med kommatecken, till exempel, Georgia, "Times New Roman". Låt användarens dator inte ha teckensnittet Georgia - i detta fall kommer "Times New Roman" att tillämpas. Men vi står inför ett problem - med samma värde på font-size kommer teckensnitten att se olika ut. I exemplet nedan har båda styckena font-size satt till 16px, men olika font-family. Se hur storlekarna skiljer sig åt:

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>

Результат:

Detta händer på grund av att den visade teckenstorleken i större utsträckning beror inte på egenskapen font-size, som bara bestämmer den övergripande teckenstorleken, utan på förhållandet mellan värdena för egenskapen font-size och storleken x-height (x-height - detta är skillnaden mellan storleken på den gemena bokstaven "x" och den versala bokstaven "X" för ett specifikt teckensnitt).

Detta förhållande kallas aspekt av teckensnittet och beräknas med formeln: aspekt = font-size / x-height.

Storleksproblemet löses av egenskapen font-size-adjust (den låter dig ändra teckensnittets aspekt), som kommer att få det andra teckensnittet att se ut i samma storlek som det första.

Låt oss se till att teckensnittet Times New Roman har samma storlek som Georgia. Vi känner till aspekten för Georgia - det är 0.5 (se tabellen nedan).

Låt oss sätta font-size-adjust för texten med Times New Roman till värdet 0.5 och vi kommer att se att den andra texten blev av samma storlek som den första:

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>

Результат:

Syntax

cssselector {
  font-size-adjust: tal | none;
}

Värden

Standardvärde: none.

Hur bestämmer man aspektvärdet för ett teckensnitt?

Se utdrag från W3C-specifikationen: Proportionalitetsfaktorn (aspekt) för valda teckensnitt kan beräknas genom att jämföra samma text, men med olika värden på font-size-adjust. Om värdet på egenskapen är korrekt valt, kommer texten med samma teckenstorlek förbli oförändrad för alla teckensnitt som används på sidan.

Här är de aspektvärden jag känner till för några teckensnitt: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58.

Exempel

Jämför hur texten ser ut med olika värden på font-size-adjust och samma font-size och 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>

Результат:

Exempel . Tillämpning i verkliga livet

Koden nedan gör så att i händelse av avsaknad av teckensnittet Georgia på användarens dator, kommer det tillämpade teckensnittet Times New Roman att ha samma storlek som 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;
}

Результат: