Font

• Font
• Font-family
• Font-style
• Font-variant
• Font-weight
• Font-size

Voor het bepalen van lettertype, grootte, weergave en dergelijke bestaan een aantal properties. Te weten font, font-family, font-style, font-variant, font-weight, font-size. Font zal ik zelf nooit gebruiken, aangezien dit de overzichtelijklheid niet ten goede komt.

Font is een manier om values toe te kennen aan properties op verkorte schrijfwijze.

Een voorbeeld:

P { font: 12pt sans-serif }

Aan de p tag wordt als waarde gegeven voor de font-size 12pt en als lettertype sans-serif. Je hoeft nu geen font-size en font-family toe te voegen. Elk niet genoemde property wordt gesteld op de default waarde.

Font-family

Al gezien in eerder gegeven voorbeeld. Font-family bepaalt het soort lettertype. Als een lettertype wordt genomen met meerdere woorden, dan moet de naam omgeven worden met aanhalingstekens, dus Times New Roman wordt in css omgeven met aanhalingstekens.

Font-style

De font-style property geeft aan hoe de letters op de pagina eruit moeten zien. Als values zijn mogelijk:

• Normal
• Italic
• Oblique

Klik hier... Voorbeeld

Zowel italic als oblique geven de tekst schuin gedrukt weer op het scherm.

Font-variant

Als mogelijke values bestaan:

• Normal
• Small-caps

In de praktijk zal deze van weinig waarde zijn. Probeer het eens en kijk of je denkt dat je het kunt gebruiken, anders: Zo snel mogelijk vergeten.

Font-weight

Font-weight geeft aan hoe dik de letters moeten worden. Denk bijvoorbeeld aan bold. Alleen kun je met behulp van css heel precies de dikte gaan bepalen van de letters. Mogelijke values:

• Normal
• Bold
• Bolder
• Lighter
• 100 t/m
• 900

Klik hier... Voorbeeld

En 100 is dan het minst dik en 900 het dikste. Dit is voor het bepalen van h1 waarden een waardevol instrument.

Font-size

De font-size is naast font-family misschien wel het allerbelangrijkste property bij het bepalen van de weergave van tekst. Hiermee kun je zeer precies de hoogte van bijvoorbeeld een h1 gaan bepalen. Mogelijke values:

• absolute-size
• relative-size
• length
• percentage

Het is mogelijk om op vele manieren de hoogte te bepalen. Een absolute waarde kan worden opgegeven in pixels, in punten etc. Relatief kan door bijvoorbeeld de woorden smaller of larger te gebruiken. Ook kan je een percentage opgeven.

Voorbeeld:

p { font-size: 150% }

De letters in een alinea krijgen een hoogte van 150% ten opzichte van de basis lengte van de tekst in de pagina.

Bijbehorend: css/vrbld-3.html

Klik hier... Voorbeeld