Cascading Style Sheets/Tekstopmaak

font-family

Met font-family kun je het lettertype veranderen van je tekst. Je kunt dan de tekst een specifiek lettertype geven of een bepaald type. Als je een specifiek lettertype wilt gebruiken, moet je simpelweg de naam van een lettertype geven als waarde. Er zijn vijf verschillende soorten lettertypes met elk een verschillende schrijfstijl:

• serif:
• sans-serif:
• cursive:
• fantasy:
• monospace:

CSS-code: Voorbeeld van font-family

p        {
         font-family: Arial, "Times New Roman", Serif;
         }

Je kunt meerdere lettertypes opgeven als waarde. Ze moeten dan van elkaar gescheiden zijn met een komma(,). Het nut hiervan is dat als de computer het eerste lettertype dat je opgeeft niet ondersteunt, hij gewoon de volgende neemt. Als laatste is het sterk aangeraden om een soort lettertype op te geven als waarde. Dit is handig voor wanneer de computer geen enkele van de je opgegeven lettertypes ondersteunt, er zelf één zoekt op basis van die soort, hierdoor kun je ervoor zorgen dat er een lettertype wordt gekozen dat past bij jouw voorkeur. Doe je dit niet, dan wordt er gebruik gemaakt van het standaard lettertype. Vanaf CSS3 is er de mogelijkheid om zelf een lettertype mee te sturen, zodat je niet langer afhankelijk bent van de standaard-lettertypes (zie hieronder bij font-face).

Windows

Je kunt zien welke lettertypes er in je computer zitten door naar de map fonts te gaan. Deze map is te vinden in het pad: C:\Windows\Fonts (ervan uitgaande dat Windows het besturingssysteem is dat op de C-schijf geïnstalleerd staat).

Mac OSX

Om een lijst van lettertypes te vinden die ondersteunt worden door Mac OSX kun je het programma "Lettertypecatalogus" openen.

font-face

Om gebruik te maken van niet-standaard lettertypes (eventueel zelfgemaakte ttf of otf), kan je vanaf CSS3 gebruik maken van font-face.

HTML-code: Voorbeeld van font-face

@font-face {
font-family: "mijnlettertype";
src: local("?"), url("fonts/mijnlettertype.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
section article p {
font-family: "mijnlettertype";
}

Met de test local("?") wordt nagegaan of lettertype nog niet op de computer staat, of het dus nog nodig is om het aangegeven lettertype te gaan downloaden.

font-style

...

font-variant

Voor font-variant kun je twee mogelijke waardes hebben. Normal, wat de tekst laat zoals die is, en small-caps. small-caps verandert kleine letters in miniatuurhoofdletters. Echte hoofdletters en andere tekens blijven hetzelfde.

CSS: Cascading Style Sheets

Op deze tekst gaan we small-caps toepassen.

CSS-code: Voorbeeld van small-caps

p        {
         font-variant: small-caps;
         }

CSS: Cascading Style Sheets

font-weight

font-weight bepaalt hoe vet of hoe donker de tekst moet zijn. Deze property kan verschillende waardes hebben, de meest gebruikte is bold en deze zet de tekst gewoon in het vet. Als de tekst normaal gesproken in het vet komt te staan en je wilt gewone tekst, gebruik dan normal. Daarnaast kun je ook 9 verschillende getallen als waarde opgeven:

• 100
• 200
• 300
• 400 (synoniem voor normal)
• 500
• 600
• 700 (synoniem voor bold)
• 800
• 900

Hoewel het de bedoeling is dat ieder getal iets vetter moet zijn dan het vorige, ondersteunen de meeste lettertypes maar 2 niveaus: normaal of vet.

font-size

Met font-size wordt de grootte van een tekst bepaald.

Voorbeeld

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
NB.: Merk op dat de line-height niet automatisch wordt aangepast!

Relatieve waarden

Met font-size: smaller; wordt de tekst iets kleiner dan normaal,
met font-size: normal; wordt de tekst normaal,
en met font-size: larger; wordt de tekst 1 stapje groter dan normaal.

Je kan ze ook nesten, dat is in elkaar gebruiken.