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:
<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:
<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
selector {
font-size-adjust: tall | none;
}
Verdier
| Verdi | Beskrivelse |
|---|---|
number |
Et tall angir fontens aspekt. |
none |
Ingen justering av fontstørrelsen. |
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:
<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:
<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;
}
:
