[ Forrige | Indhold | Næste]

Lektion 4: Fonte

I denne lektion vil vi kigge nærmere på muligheder for at benytte fonte:

• Font familie [font-family]
• Font stil [font-style]
• Font variant [font-variant]
• Font vægt [font-weight]
• Font størrelse [font-size]
• Sammenskrivning [font]

Font familie [font-family]

En font kan i udgangspunktet kun vises på dit websted, hvis den er installeret på brugerens PC. Egenskaben font-family benyttes til at opsætte en prioriteret liste af fonte, således at hvis den første font ikke findes hos brugeren, benyttes den næste på listen - og så videre.

Der skelnes mellem font-familier og generiske font-familier:

Font-familie

Eksempler på en font-familie (ofte blot benævnt "font") kan f.eks. være "Arial", "Times New Roman" eller "Tahoma".

Generisk font-familie

Generiske font-familier kan bedst beskrives som grupper af font-familier med ensartede udseende. Et eksempel er sans-serif, som er en samling af fonte uden fødder.

Systemet kan også illustreres med følgende eksempler:

Når man angiver en liste med fonte, starter man naturligvis med med den font, man helst ser benyttet. Derefter vil det være naturligt at liste nogle alternative fonte, som minder meget om den foretrukne. Det er en fordel at afslutte listen med en generisk font-familie. Simpelthen fordi man derved bedre tager højde for en situation, hvor ingen af de specificerede fonte er tilstede.

Et eksempel på en prioriteret liste med fonte:

h1 {
	font-family: arial, verdana, sans-serif;
}
h2 {
	font-family: "Times New Roman", serif;
}

 Vis som eksempel

I dette tilfælde bliver overskrifter markeret med <h1> vist med fonten "Arial". Hvis denne font ikke findes hos brugeren benyttes istedet "Verdana". Og endelig - i mangel af de to fonte - skal benyttes en font fra familien sans-serif (uden fødder).

Bemærk for <h2> hvordan font-navnet "Times New Roman" indeholder mellemrum, og derfor angives med citationstegn.

Font stil [font-style]

Egenskaben font-style definerer, hvorvidt den valgte font skal stå med normal, italic eller oblique. Vi skal ikke her gå nærmere ind i definitionerne af italic og oblique, blot konstatere at begge er, hvad man kunne kalde "kursiverede" eller "skrå" udgaver af en font-familie.

Lad os gøre alle niveau to overskrifter - <h2> - kursiverede:

h1 {
	font-family: arial, verdana, sans-serif;
}
h2 {
	font-family: "Times New Roman", serif;
	font-style: italic;
}

 Vis som eksempel

Font variant [font-variant]

En "small-caps font" er en font, der istedet for "små" bogstaver (lower case) benytter mindre "STORE" bogstaver (upper case). Forvirret? Så prøv at se disse eksempler:

Hvis font-variant sættes til small-caps, og der ikke er en small-caps font tilgængelig på brugerens PC, vil browseren sandsynligvis blot angive teksten med "STORE" bogstaver.

h1 {
	font-variant: small-caps;
}
h2 {
	font-variant: normal;
}

 Vis som eksempel

Font vægt [font-weight]

Egenskaben font-weight bestemmer vægten af en font. Eller mere populært sagt: med hvor fed skrift fonten skal skrives.

En font kan være normal eller bold. Lad os kigge på et eksempel:

p {
	font-family: arial, verdana, sans-serif;
}
td {
	font-family: arial, verdana, sans-serif;
	font-weight: bold;
}

 Vis som eksempel

Nogle browsere understøtter også tal mellem 100-900 (i hele hundreder) som angivelse af vægt for fonten.

Font størrelse [font-size]

Størrelsen på en font sættes med egenskaben font-size.

CSS giver dig utallige muligheder for at angive fontstørrelser. Der findes mange forskellige enheder (f.eks. pixels og procenter) man kan vælge imellem. I denne tutorial kigger vi kun på de mest almindelige og hensigtsmæssige enheder.

Lad os kigge på nogle forskellige angivelser af font-størrelser:

h1 {	
	font-size: 30px;
}
h2 {	
	font-size: 1cm;
}
h3 {	
	font-size: 120%;
}
p {	
	font-size: 1em;
}

 Vis som eksempel

Bemærk at der er den afgørende forskel på de fire nævnte enheder, at px og cm låser font-størrelsen, mens % og em tillader brugeren at skalere font-størrelsen, så den passer til hans/hendes syn. Man bør tænke sig godt om før man fratager brugeren denne mulighed - mange mennesker har nedsat syn, eller bare en dårlig skærm.

Nedenfor er vist et udsnit af Netscape og Internet Explorers menuer for justering af tekst-størrelsen. Prøv eventuelt at skrue op og ned for tekst-størrelsen her på html.dk - ganske smart, ikke?

Sammenskrivning [font]

Ligesom det var tilfældet i den forrige lektion med background, fungerer font som en mulighed for sammenskrivning af alle de øvrige font egenskaber.

Det vil sige at følgende kodelinier:

p {	
	font-style: italic;
	font-weight: bold;
	font-size: 30px;
	font-family: arial, sans-serif;
}

Lidt mere elegant kunne skrives:

p {	
	font: italic bold 30px arial, sans-serif
}

Rækkefølgen i værdiangivelsen for font er:

font-style | font-variant | font-weight | font-size | font-family

Browser-kompatibelitet

Langt de fleste browsere på markedet understøtter egenskaberne for fonte. Hvis du er i tvivl kan prøve dig frem, eller referere til nedenstående tabel:

Tabellen viser fra og med hvilken version browseren understøtter den pågældende egenskab.

Her i lektion 4 har du lært om mulighederne med fonte. Husk at en af fordelene ved kun at bruge CSS til at specificere fonte på sit websted er, at man til enhver tid kan skifte font for hele webstedt på få minutter. Det er med andre ord blevet meget lettere at eksperimentere sig frem til den helt rigtige font.

Næste lektion handler om formattering af tekst.

[ Forrige | Indhold | Næste]