CSS biedt tal van mogelijkheden voor het aanpassen van de vormgeving van tekst. Dit varieert van het lettertype en de letterstijl tot schaduweffecten.
Onder de CSS-lettertypes worden eigenschappen zoals lettertype, letterstijl en lettergewicht verstaan. Deze eigenschappen zijn natuurlijk vooral zinvol voor HTML-elementen waarin tekst staat (p, i, enz.). Ze kunnen echter ook worden toegepast op tabellen.
Met font-family kan het te gebruiken lettertype worden ingesteld.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Dit is een alinea met een <strong>vet woord</strong>.</p>
<h2>Dit is een kop met een <strong>vet woord</strong>.</h2>
</div>
</body>
</html>In de browser ziet dit er als volgt uit:
Tot de standaard lettertypes behoren bijvoorbeeld Arial, Helvetica en Times Roman. Met de CSS-eigenschap font-family geef je de gewenste lettertypes op. Als je meerdere lettertypes opgeeft, is de volgorde belangrijk. Als het eerste opgegeven lettertype beschikbaar is, wordt dat gebruikt. De gewenste lettertypes worden van elkaar gescheiden door komma's. Als laatste instructie noteer je meestal een zogenaamde generieke letterfamilie. Met een dergelijke generieke letterfamilie geef je browsers de mogelijkheid om een lettertype te kiezen dat ten minste enigszins lijkt op het opgegeven lettertype.
• serif = een lettertype met schreefjes
• sans-serif = een lettertype zonder schreefjes
• cursive = een lettertype voor cursieve tekst
• fantasy = een lettertype voor ongewone tekst
• monospace = een lettertype met gelijkmatige dikte van tekens.
De letterstijl
Met de eigenschap font-style kun je de letterstijl bepalen. Als het gekozen lettertype het toelaat, kun je met de waarde italic een cursieve schrijfwijze afdwingen.
Bij andere lettertypes kun je met oblique een schuingedrukte weergave krijgen.
De volgende CSS-eigenschap waarmee de tekstvormgeving kan worden beïnvloed, heet font-variant. Hiermee kun je zogenaamde small-caps definiëren.
Hiervoor wijs je font-variant de waarde small-caps toe.
De lettergrootte
Het is ook essentieel om een lettergrootte op te geven. CSS biedt hiervoor de eigenschap font-size aan. De lettergroottes kunnen worden opgegeven in verschillende eenheden.
• EM
• REM
• Pixel
• Procent
• Sleutelwoorden
De volgende varianten zijn beschikbaar als sleutelwoorden:
• xx-small - zeer, zeer klein
• x-small - zeer klein
• small - klein
• smaller - kleiner dan in ouder element
• medium - gemiddeld
• large - groot
• x-large - zeer groot
• xx-large - zeer, zeer groot
• larger - groter dan in ouder element
Hier een voorbeeld van hoe de lettergrootte kan worden ingesteld:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}En zo ziet dat eruit in de browser:
Merk op dat de definitie van lettergroottes zeer complex is, omdat de verschillende eenheden elk hun voor- en nadelen hebben.
Een goed overzicht van wanneer je het beste welke eenheid kunt gebruiken, vind je op de pagina http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Voor degenen die dat niet willen lezen: Gebruik relatieve waarden zoals em voor schermweergave. Voor afdruklay-outs moet je echter absolute eenheden zoals pt gebruiken.
Het lettergewicht
Verder gaan we met het lettergewicht. Hiermee bepaal je de dikte en sterkte van een letter. Hiervoor wordt de eigenschap font-weight gebruikt.
.fett {
font-weight:bold;
}
Met deze syntax wordt de geselecteerde tekst vetgedrukt weergegeven.
Mogelijke waarden zijn bold (vet), bolder (extra vet), lighter (lichter) en normal. Ook numerieke waarden zoals 100, 200, 300, 400, 500, 600, 700, 800 en 900 zijn toegestaan. Deze variëren van extra dun (100) tot extra vet (900).
Samenvatting definities
In verband met schriftdefinities speelt ook de eigenschap line-height een belangrijke rol, waarmee de regelhoogte gedefinieerd kan worden. Ik zal later nog uitgebreider ingaan op deze eigenschap. Op dit moment moet het slechts vermeld worden, aangezien het een rol speelt in verband met de hierna getoonde font-eigenschap.
Jullie kunnen de tot dusver gepresenteerde gegevens over het tonen van tekst met elkaar combineren. Hiervoor wordt de algemene font-eigenschap gebruikt. Deze omvat de volgende individuele specificaties of neemt deze op.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Met font kunnen verschillende tekstopmaakstijlen gecombineerd worden. Hierbij kunnen jullie de eerder genoemde eigenschappen opgeven, maar het is niet noodzakelijk om ze allemaal te gebruiken. Echter, de eigenschappen voor lettergrootte en lettertype zijn verplicht.
Dankzij de korte notatie kunnen CSS-bestanden korter en overzichtelijker gehouden worden.
De volgorde zoals hierna getoond moet wel aangehouden worden. Als de twee eigenschappen font-size en line-height genoteerd worden, moeten deze gescheiden worden door een schuine streep. Als op deze plek slechts één waarde wordt opgegeven, staat deze voor font-size.
Een voorbeeld:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust is ontwikkeld om zo lettertypen bijna gelijk van grootte weer te kunnen geven. Verschillende lettertypen hebben verschillende x-hoogten bij een gelijke letterhoogte. Echter, lettertypen met een grotere x-hoogte zijn beter leesbaar. Hierdoor kan het gebeuren dat een document slecht leesbaar is, als het oorspronkelijke lettertype niet beschikbaar is en vervangen wordt door een ander met een kleinere x-hoogte. Met font-size-adjust zou dit verschil gecorrigeerd moeten kunnen worden.
Een voorbeeld:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
In de volgende tutorial zullen jullie meer mogelijkheden leren kennen waarmee jullie het uiterlijk van jullie website kunnen aanpassen.
