CSS-font

Fra Holstebro HTX Wiki
Skift til: navigering, søgning

Ved hjælp af fonts, eller på dansk: skrifttyper, kan vi bestemme alt om skrifttypen vi bruger. De forskellige ting kommer vi ind på længere nede.

Font family

Der findes to typer familier[1]:

family-name : Som fx. "times", "courier", "arial" osv.

generic-family. : Som fx. "serif", "sans-serif", "cursive", "fantasy" osv.

Eksempel:

<style type="text/css">
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>

Giver disse skrifttyper:

Font-family-ex.jpg

Font size

Skal beskrive størrelsen på teksten.

Eksempel:

<style type="text/css">
h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%;}
</style>

Giver disse størrelser:

Font-size.jpg

Font style

Stilen skal beskrive om teksten skal være kursiv, normal, italic eller noget helt andet.

Eksempel:

<style type="text/css">
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>

Giver disse stile:

Font-style.jpg

Font variant

Med dette kan man gøre små bokstaver, til blokbogstaver - hvor de stadig er mindre end normalt

Eksempel:

<head>
<style type="text/css">
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>

Det giver disse varianter:

Font-variant.jpg

Font weight

Med dette kan man bestemme tykkelsen på bogstaverne - altså om bogstaverne skal skrives meget tynde, eller meget tykke.

Eksempel:

<style type="text/css">
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>

Det giver:

Font-weight.jpg

Referencer