Egenskapen font-size-adjust

Egenskapen font-size-adjust lar deg kontrollere fontstørrelsen, med uendret font-size (øke eller redusere).

Anvendelse: la det i font-family være angitt to fonter separert med komma, for eksempel, Georgia, "Times New Roman". La det på brukerens datamaskin ikke være fonten Georgia - i dette tilfellet vil "Times New Roman" bli brukt. Imidlertid venter det et problem - med samme verdi for font-size vil fontene se forskjellig ut. I eksempelet nedenfor er font-size satt til 16px for begge avsnitt, men forskjellig font-family. Se hvordan størrelsene skiller seg:

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>

Результат:

Dette skjer fordi den viste fontstørrelsen i større grad avhenger ikke av egenskapen font-size, som bare definerer den generelle fontstørrelsen, men av forholdet mellom verdien av egenskapen font-size og størrelsen x-height (x-height - dette er forskjellen mellom størrelsen på den lille bokstaven "x" og store bokstaven "X" for en bestemt font).

Dette forholdet kalles aspektet til fonten og beregnes med formelen: aspekt = font-size / x-height.

Størrelsproblemet løses av egenskapen font-size-adjust (den lar deg endre fontens aspekt), som vil tvinge den andre fonten til å se like stor ut som den første.

La oss gjøre slik at fonten Times New Roman blir like stor som Georgia. Vi kjenner aspektet til Georgia - det er 0.5 (se tabellen nedenfor).

La oss sette font-size-adjust for teksten med Times New Roman til verdien 0.5 og vi vil se at den andre teksten ble like stor som den første:

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>

Результат:

Syntaks

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

Verdier

Standardverdi: none.

Hvordan bestemme aspektverdien for en font?

Se utdrag fra W3C-spesifikasjonen: Proporsjonalitetsfaktoren (aspektet) for valgte fonter kan beregnes ved å sammenligne den samme teksten, men med forskjellig verdi for font-size-adjust. Hvis verdien for egenskapen er riktig valgt, vil teksten ved samme fontstørrelse forbli uendret for alle fonter som brukes på siden.

Jeg oppgir de kjente aspektverdiene for noen fonter: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58.

Eksempel

Sammenlign hvordan tekst ser ut med forskjellig verdi for font-size-adjust og samme font-size og 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>

Результат:

Eksempel . Anvendelse i virkeligheten

Koden nedenfor gjør slik at i tilfelle fravær av fonten Georgia på brukerens datamaskin, vil den anvendte fonten Times New Roman være like stor 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;
}

Результат: