16 of 313 menu

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

:

Nederlands
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Wij gebruiken cookies voor de werking van de site, analyse en personalisatie. De verwerking van gegevens gebeurt volgens het Privacybeleid.
alles accepteren aanpassen weigeren