Die font-size-adjust Eienskap

Die eienskap font-size-adjust laat beheer toe van die lettergrootte, terwyl die font-size onveranderd bly (vergroting of verkleining).

Toepassing: laat ons sê in font-family is twee lettertipes gespesifiseer deur 'n komma, byvoorbeeld, Georgia, "Times New Roman". Gestel die gebruiker se rekenaar het nie die Georgia lettertipe nie - in hierdie geval sal "Times New Roman" toegepas word. Maar, ons sal 'n probleem hê - met dieselfde waarde van font-size sal die lettertipes anders lyk. In die voorbeeld hieronder het albei paragrawe 'n font-size van 16px, maar verskillende font-family. Kyk hoe verskil die groottes:

<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>

Dit gebeur omdat die vertoonde lettergrootte meer afhanklik is nie van die eienskap font-size nie, wat slegs die algehele lettergrootte bepaal, maar van die verhouding tussen die waarde van die eienskap font-size en die grootte x-height (x-height is die verskil tussen die grootte van die kleinletter "x" en die hoofletter "X" vir 'n spesifieke lettertipe).

Hierdie verhouding word die aspek van die lettertipe genoem en word bereken met die formule: aspek = font-size / x-height.

Die grootteprobleem word opgelos deur die eienskap font-size-adjust (dit laat verandering van die lettertipe-aspek toe), wat die tweede lettertipe sal laat lyk of dit van dieselfde grootte is as die eerste.

Kom ons maak die Times New Roman lettertipe van dieselfde grootte as Georgia. Ons ken die aspek van Georgia - dit is 0.5 (sien tabel hieronder).

Laat ons die font-size-adjust vir die teks met Times New Roman instel op die waarde 0.5 en ons sal sien dat die tweede teks nou dieselfde grootte het as die eerste:

<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>

Sintaksis

selektor {
	font-size-adjust: getal | none;
}

Waardes

Waarde	Beskrywing
`number`	'n Getal spesifiseer die lettertipe-aspek.
`none`	Geen aanpassing van lettergrootte nie.

Verstekwaarde: none.

Hoe om die aspekwaarde vir 'n lettertipe te bepaal?

Kyk na hierdie uittreksel uit die W3C-spesifikasie: Die proporsieverhouding (aspek) vir geselekteerde lettertipes kan bereken word deur vergelyking van dieselfde teks, maar met verskillende waardes van font-size-adjust. As die waarde van die eienskap korrek gekies is, sal by dieselfde lettergrootte die teks onveranderd bly vir alle lettertipes wat op die bladsy gebruik word.

Hier is die aspekwaardes wat ek ken vir sommige lettertipes: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58.

Voorbeeld

Vergelyk hoe teks lyk met verskillende waardes van font-size-adjust en dieselfde font-size en font-family:

<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>

Voorbeeld . Toepassing in die werklike lewe

Die kode hieronder sorg daarvoor dat, indien die Georgia lettertipe nie op die gebruiker se rekenaar is nie, die toegepaste lettertipe Times New Roman van dieselfde grootte sal wees as Georgia:

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

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