Eigenschap font-size-adjust
De eigenschap font-size-adjust maakt het mogelijk
om de grootte van het lettertype te controleren, bij een onveranderde
font-size
(vergroten of verkleinen).
Toepassing: stel dat in font-family
twee lettertypen zijn opgegeven gescheiden door een komma, bijvoorbeeld,
Georgia, "Times New Roman". Stel dat
op de computer van de gebruiker het Georgia lettertype niet aanwezig is
- in dat geval wordt "Times New Roman" toegepast.
Echter, wacht ons een probleem - bij dezelfde
waarde van font-size
zullen de lettertypen er verschillend uitzien. In het voorbeeld
hieronder is voor beide alinea's een font-size
van 16px ingesteld, maar verschillende font-family.
Kijk hoe de groottes verschillen:
<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 gebeurt omdat de weergegeven
grootte van het lettertype in grotere mate niet afhankelijk is
van de eigenschap font-size,
die slechts de algemene grootte van het lettertype bepaalt,
maar van de verhouding tussen de waarden van de eigenschap font-size
en de grootte van de x-height (x-height
- dit is het verschil tussen de grootte van de kleine letter
"x" en de hoofdletter "X" voor een bepaald
lettertype).
Deze verhouding wordt de aspect van het lettertype genoemd en wordt berekend met de formule: aspect = font-size / x-height.
Het probleem van de groottes wordt opgelost door de eigenschap font-size-adjust
(het maakt het mogelijk om het aspect van het lettertype te wijzigen), die
ervoor zorgt dat het tweede lettertype er even groot
uitziet als het eerste.
Laten we ervoor zorgen dat het Times
New Roman lettertype even groot is als
Georgia. We weten het aspect van Georgia
- dat is 0.5 (zie de tabel hieronder).
Laten we font-size-adjust voor de tekst
met Times New Roman instellen op de waarde 0.5
en we zullen zien dat de tweede tekst even groot
is geworden als de 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>
:
Syntaxis
selector {
font-size-adjust: getal | none;
}
Waarden
| Waarde | Beschrijving |
|---|---|
number |
Een getal dat het aspect van het lettertype specificeert. |
none |
Geen aanpassing van de lettertypegrootte. |
Standaardwaarde: none.
Hoe bepaal je de aspectwaarde voor een lettertype?
Bekijk dit fragment uit de W3C-specificatie:
De proportiecoëfficiënt (aspect) voor
geselecteerde lettertypen kan worden berekend door
dezelfde tekst te vergelijken, maar met verschillende
waarden voor font-size-adjust. Als de waarde
van de eigenschap correct is gekozen, dan blijft bij dezelfde lettertypegrootte
de tekst onveranderd voor alle
op de pagina gebruikte lettertypen.
Hier zijn de mij bekende aspectwaarden voor
enkele lettertypen: Georgia - 0.5,
Times New Roman - 0.46, Verdana -
0.58.
Voorbeeld
Vergelijk hoe de tekst eruitziet met verschillende waarden van
font-size-adjust en dezelfde 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 de praktijk
De onderstaande code zorgt ervoor dat, bij afwezigheid
van het Georgia lettertype op de computer van de gebruiker,
het toegepaste lettertype Times New Roman
even groot is als 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;
}
: