CSS giver også adskillige egenskaber til tilpasning af skrifttypen. Disse spænder fra skrifttypen til skriftstilen og skyggeeffekter.
Blandt CSS-skriftegenskaberne inkluderer oplysninger om skrifttypen, skriftstilen og skriftvægten. Disse egenskaber er naturligvis mest nyttige til HTML-elementer, der indeholder tekst (p, i osv.). Men de kan også bruges til tabeller.
Med font-family kan du definere skrifttypen, der skal bruges.
<!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>Det er et afsnit med et <strong>fedt ord</strong>.</p>
<h2>Det er en overskrift med et <strong>fedt ord</strong>.</h2>
</div>
</body>
</html>Resultatet i browseren ser sådan ud:
Typiske skrifttyper inkluderer f.eks. Arial, Helvetica og Times Roman. Med CSS-egenskaben font-family kan man angive de ønskede skrifttyper. Når man angiver flere skrifttyper, er rækkefølgen afgørende. Hvis den første skrifttype er tilgængelig, bruges denne. De ønskede skrifttyper adskilles af kommaer. Til sidst noteres normalt en såkaldt generisk skriftfamilie. Ved at angive en generisk skriftfamilie giver man browsere mulighed for at vælge en skrifttype, der mindst minder om den angivne.
• serif = en skrifttype med seriffer
• sans-serif = en skrifttype uden seriffer
• cursive = en skrifttype til kursiv skrift
• fantasy = en skrifttype til usædvanlig skrift
• monospace = en skrifttype med lige bredde for tegn.
Skriftstil
Med egenskaben font-style kan du bestemme skriftstilen. Hvis den valgte skrifttype tillader det, kan du med værdien italic tvinge en kursiv skriveform.
Andre skrifttyper kan hældes ved hjælp af oblique.
Næste CSS-egenskab, der kan påvirke skriftbilledet, kaldes font-variant. Her kan man definere såkaldte kapitæler.
Til dette angives værdien small-caps til font-variant.
Skriftstørrelse
Det er også meget vigtigt at angive en skriftstørrelse. CSS giver egenskaben font-size til dette formål. Skriftstørrelser kan angives i forskellige enheder.
• EM
• REM
• Pixel
• Procent
• Nøgleord
Følgende nøgleord er tilgængelige:
• xx-small – meget, meget lille
• x-small – meget lille
• small – lille
• smaller – mindre end i det overordnede element
• medium – medium
• large – stor
• x-large – meget stor
• xx-large – meget, meget stor
• larger – større end i det overordnede element
Her er et eksempel på, hvordan skriftstørrelsen kan specificeres:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}Og sådan ser det ud i browseren:
Bemærk venligst, at angivelse af skriftstørrelse er meget komplekst, da de forskellige måleenheder har deres fordele og ulemper. En god oversigt over, hvilken enhed der fungerer bedst hvornår, findes på siden http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. For dem, der ikke ønsker at læse alt dette: Brug relative angivelser som em til skærmdisplay. Til tryklayout skal du derimod bruge absolutte enheder som pt.
Skriftvægt
Næste skridt er skriftvægt. Hermed bestemmes tykkelsen og styrken af en skrift. Egenskaben font-weight bruges til dette.
.fett {
font-weight:bold;
}
Ved denne syntaks vises den markerede tekst fed. 
Mulige værdier er bold (fed), bolder (særligt fed), lighter (tyndere) og normal. Derudover tillades de numeriske værdier 100, 200, 300, 400, 500, 600, 700, 800 og 900. Disse spænder fra ekstra tyndt (100) til særligt fedt (900).
Opsummer definitioner
I forbindelse med skriftdefinitioner spiller egenskaben line-height også en vigtig rolle, da den definerer linjehøjden. Jeg vil senere komme nærmere ind på denne egenskab. På dette tidspunkt skal den blot nævnes, da den spiller en vis rolle i forbindelse med den efterfølgende viste font-egenskab.
I kan kombinere de indtil videre præsenterede oplysninger om skriftvisning. Til dette formål bruges den generelle font-egenskab. Den omfatter følgende individuelle oplysninger eller inkluderer dem.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Med font kan forskellige skriftformateringer kombineres. I kan angive de tidligere nævnte egenskaber, men det er ikke nødvendigt at bruge dem alle. De nødvendige egenskaber er dog skriftstørrelse og skriftfamilie.
Takket være den korte skrivemåde kan CSS-filer holdes kortere og mere overskuelige.
Rækkefølgen, som den vises nedenfor, skal dog overholdes. Når de to egenskaber font-size og line-height noteres, skal de adskilles med en skråstreg. Hvis der kun angives en værdi på dette tidspunkt, står den for font-size.
Et eksempel:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust er udviklet for at kunne vise skrifttyper næsten ens i størrelse. Forskellige skrifttyper har forskellig x-højde ved samme skriftstørrelse. Dog er skrifter med større x-højde mere læsbare. Så det kan ske, at et dokument bliver vanskeligt at læse, hvis den oprindelige skrifttype ikke er tilgængelig, og erstattes af en anden med en mindre x-højde. Med font-size-adjust bør denne forskel kunne udlignes.
Et eksempel:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
I den næste tutorial lærer I yderligere muligheder at kende, hvormed I kan tilpasse skriftbilledet på jeres hjemmeside.
