|
Handleiding HTML  Legenda | Voorbeelden | Lettertypen | CSS eigenschappen | Begin
font-size
|
De font-size eigenschap bepaalt de grootte van de letters.
Voorbeeld:
font-size: small
|
<absolute grootte>
|
Onder de waarde absolute grootte vallen de volgende sleutelwoorden: xx-small, x-small, small, medium, large, x-large en xx-large.
De absolute sleutelwoorden definiëren niet een exacte grootte in punten of pixels, die in elke situatie en voor elke browser en elk lettertype gelijk is. Ze verwijzen daarentegen naar een tabel met lettergroottes, welke door de browser berekend wordt en per lettertype kan verschillen.
In de CSS 1 specificatie werd aanbevolen bij het berekenen van de grootte van de sleutelwoorden een vergrotingsfactor van 1,5 te hanteren: de grootte van een sleutelwoord vermenigvuldigd met 1,5 levert de grootte van het volgende sleutelwoorden in de reeks op. Omdat deze te hoog bleek te zijn, is de vergrotingsfactor in CSS 2 verlaagd tot 1,2. In CSS 2.1 wordt geen vaste vergrotingsfactor meer gehanteerd. Om te kleine letters te voorkomen, neemt de vergrotingsfactor bij de sleutelwoorden kleiner dan medium af. Bij de sleutelwoorden groter dan large neemt de vergrotingsfactor juist weer wat toe.
In het volgende overzicht zijn de uitkomsten van de verschillende CSS-specificaties naast elkaar gezet, waarbij het sleutelwoord medium als gemiddelde is aangehouden. Daarbij is ook een in CSS 2.1 opgenomen samenhang aangegeven met de mogelijkheden die HTML biedt: het Hx element voor koppen en het FONT element voor het bepalen van de lettergrootte.
| |
CSS
1 |
CSS
2 |
CSS
2.1 |
HTML
FONT |
HTML
Hx |
| xx-small |
0,30 |
0,58 |
0,60 |
SIZE="1" |
H6 |
| x-small |
0,44 |
0,69 |
0,75 |
|
|
| small |
0,67 |
0,83 |
0,89 |
SIZE="2" |
H5 |
| medium |
1,00 |
1,00 |
1,00 |
SIZE="3" |
H4 |
| large |
1,50 |
1,20 |
1,20 |
SIZE="4" |
H3 |
| x-large |
2,25 |
1,44 |
1,50 |
SIZE="5" |
H2 |
| xx-large |
3,38 |
1,73 |
2,00 |
SIZE="6" |
H1 |
| |
|
|
3,00 |
SIZE="7" |
|
In de praktijk blijken de meeste browsers de vermenigvuldigingsfactoren uit CSS 2.1 aan te houden. Alleen Netscape Navigator 4.x gaat voor de grotere sleutelwoorden uit van de vermenigvuldigingsfactor uit CSS 1.
Bij de berekening van de tabel met lettergroottes zal de browser over het algemeen uitgaan van de door de gebruiker ingestelde standaard lettergrootte. Deze standaard lettergrootte moet, zoals bedoeld in de CSS-specificatie, gekoppeld worden aan de waarde medium. In Microsoft Internet Explorer 4.0 t/m 5.5 en in Opera 4.0 t/m 6.0 wordt de standaard lettergrootte in afwijking van deze regel gekoppeld aan small. De tekst wordt daardoor in deze browsers bij alle sleutelwoorden te groot weergegeven (bekijk de verschillen in een voorbeeld).
In Microsoft Internet Explorer vanaf versie 6.0 en Opera vanaf versie 7.0 hangt de grootte van de tekst bij de verschillende sleutelwoorden af van de gebruikte DOCTYPE-declaratie. Bij bepaalde DOCTYPE-declaraties geeft de browser het document weer in de "standards modus", bij anderen in de "quirks modus". In de "standards modus" komt medium overeen met de standaard lettergrootte van de browser. In de "quirks modus" gaan de genoemde browsers uit van de onjuiste wijze waarop Microsoft Internet Explorer t/m versie 5.5 de tabel met lettergroottes bepaalt, namelijk die waarbij small overeenkomt met de standaard lettergrootte.
|
<relatieve grootte>
|
Onder de waarde relatieve grootte vallen de volgende sleutelwoorden: larger en smaller.
De sleutelwoorden zijn relatief ten opzichte van de tabel met lettergroottes welke is bepaald voor de absolute sleutelwoorden èn ten opzichte van de lettergrootte van het parent element.
Wanneer voor het parent element een absoluut sleutelwoord is gebruikt, dan is het resultaat bij larger de volgende waarde in de reeks (bijvoorbeeld large wordt x-large) en bij smaller de vorige waarde in de reeks (bijvoorbeeld large wordt medium). Wanneer er geen volgende waarde in de reeks is, dan mag de browser de grootte bepalen door extrapolatie.
Wanneer voor het parent element geen absoluut sleutelwoord is gebruikt en de grootte niet voorkomt in de tabel met lettergroottes, dan staat het de browser vrij de uitkomsten van larger of smaller te bepalen door interpolatie of door het aanhouden van de dichtstbijzijnde grootte.
|
<lengte>
|
De lengte wordt uitgedrukt als combinatie van een getal en een eenheid.
Een negatieve waarde is niet toegestaan.
In tegenstelling tot bij andere eigenschappen wordt de lettergrootte bij de relatieve lengte-eenheden em en ex berekend ten opzichte van de lettergrootte van het parent element.
Wanneer gebruik gemaakt wordt van absolute lengte-eenheden (bijvoorbeeld points), dan moet er rekening mee worden gehouden dat deze op Linux- of Macintosh-systemen kleiner worden weergegeven dan op Windows-systemen. Om te komen tot een vergelijkbare weergave, moet voor Linux en Macintosh (via systeem-specifieke stijlbladen) een ca. 25% grotere lettergrootte gedefinieerd worden.
Vanwege de leesbaarheid wordt aanbevolen geen lettergroottes te gebruiken, die kleiner zijn dan 9 pixels. Hetzelfde geldt voor lettergroottes kleiner dan 7 pt op Windows-systemen, of 9pt op Linux- of Macintosh-systemen.
|
<percentage>
|
Een percentage wordt uitgedrukt als combinatie van een getal en het %-teken. Het percentage wordt berekend ten opzichte van de lettergrootte van het parent element.
Voor de font-size eigenschap geldt dat 100% overeenkomt met 1em (zie ook de waarde lengte).
|
inherit
|
De waarde van het parent element wordt aangehouden.
|
Bijzonderheden ondersteuning
- Microsoft Internet Explorer 3.0
- - De waarden em en ex worden niet ondersteund. Omdat ze geïnterpreteerd worden als px, wordt de tekst vaak onleesbaar.
- - De waarden larger en smaller worden geïnterpreteerd als medium.
- - De eigenschap wordt niet ondersteund voor elementen INPUT, OPTION, SELECT en TEXTAREA.
- Microsoft Internet Explorer 4.0 t/m 5.5
- - De eigenschap wordt niet ondersteund voor het OPTION element.
- - De voor een element bepaalde stijl wordt niet doorgezet in een ingesloten tabel.
- Microsoft Internet Explorer 6.0
- - De eigenschap wordt niet ondersteund voor het OPTION element.
- Netscape Navigator 4.x
- - Bij de waarde xx-small is de tekst onleesbaar.
- - De eigenschap wordt niet ondersteund voor elementen TABLE en TR.
- - Bij het LI element heeft de stijl geen betrekking op de tekst, maar alleen op de markering.
- - De eigenschap wordt niet ondersteund voor elementen DT en DD.
- - De eigenschap wordt niet ondersteund voor elementen OPTION, SELECT en TEXTAREA.
- - De voor een element bepaalde stijl wordt niet doorgezet in een ingesloten tabel.
- Netscape Navigator 6.0
- - De eigenschap wordt niet ondersteund voor het TABLE element.
- Opera 3.5 en 3.6
- - Als de waarden larger en smaller gebruikt worden voor een TD of TH element, wordt de lettergrootte bepaald ten opzichte van de standaard lettergrootte en niet ten opzichte van de voor de elementen TABLE en TR vastgelegde grootte.
- - De eigenschap wordt niet ondersteund voor de elementen INPUT, OPTION, SELECT en TEXTAREA.
- - De eigenschap wordt niet ondersteund voor de elementen TT, CODE, KBD en SAMP.
- - De eigenschap wordt niet ondersteund voor de elementen BIG, SMALL, SUB en SUP.
- Opera 4.0
- - De eigenschap wordt niet ondersteund voor de elementen INPUT, OPTION, SELECT en TEXTAREA.
- - De voor een element bepaalde stijl wordt niet doorgezet in een ingesloten tabel.
- Opera 5.0 en 5.1
- - Bij de waarde inherit wordt de tekst in een onleesbaar kleine lettergrootte weergegeven.
- - De eigenschap wordt niet ondersteund voor het OPTION element.
- - De voor een element bepaalde stijl wordt niet doorgezet in een ingesloten tabel.
- Opera 6.0
- - De eigenschap wordt niet ondersteund voor het OPTION element.
- - De voor een element bepaalde stijl wordt niet doorgezet in een ingesloten tabel.
- Opera 7.0 en hoger
- - De eigenschap wordt niet ondersteund voor het OPTION element.
Standaard lettergrootte
- Microsoft Internet Explorer 3.0
- - De standaard lettergrootte van de browser komt zoals bedoeld overeen met medium.
- Microsoft Internet Explorer 4.0 t/m 5.5 en Opera 4.0 t/m 6.0
- - De standaard lettergrootte van de browser komt overeen met small. De waarden larger en smaller worden respectievelijk weergegeven als medium en x-small.
- Mozilla, Firefox, Netscape Navigator 4.0 en hoger en Opera 3.5 en 3.6
- - De standaard lettergrootte van de browser komt zoals bedoeld overeen met medium. De waarden larger en smaller worden respectievelijk weergegeven als large en small.
- Microsoft Internet Explorer 6.0 en Opera 7.0 en hoger
- - Afhankelijk van de DOCTYPE-declaratie wordt de "standards modus" of de "quirks modus" aangehouden. In de "standards modus" komt de standaard lettergrootte van de browser zoals bedoeld overeen met medium. De waarden larger en smaller worden respectievelijk weergegeven als large en small. In de "quirks modus" komt de standaard lettergrootte van de browser overeen met small. De waarden larger en smaller worden respectievelijk weergegeven als medium en x-small.
Legenda | Voorbeelden | Lettertypen | CSS eigenschappen | Begin
Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 5 december 2004
|
