CSS skrifttyper

Indholdsfortegnelse

    Vis indholdsfortegnelse

Det er vigtigt at vælge den rigtige skrifttype til din hjemmeside!

Skrifttypevalg er vigtigt

At vælge den rigtige skrifttype har stor betydning for, hvordan læserne oplever en internet side.

Den rigtige skrifttype kan skabe en stærk identitet for dit brand.

Det er vigtigt at bruge en skrifttype, der er let at læse. Skrifttypen tilføjer værdi for din tekst. Det er også vigtigt at vælge den rigtige farve og tekststørrelse for skrifttypen.

Generiske skrifttypefamilier

I CSS er der fem generiske skrifttypefamilier:

  1. Serif-skrifttyper har en lille streg ved kanterne af hvert bogstav. De skaber en følelse af formalitet og elegance.

  2. Sans-serif-skrifttyper har rene linjer (ingen små streger). De skaber et moderne og minimalistisk look.

  3. Monospace skrifttyper - her har alle bogstaverne samme faste bredde. De skaber et mekanisk udseende.

  4. Kursive skrifttyper efterligner menneskelig håndskrift.

  5. Fantasy-skrifttyper er dekorative/legende skrifttyper.

Alle de forskellige skrifttypenavne tilhører en af de generiske skrifttypefamilier.

Forskellen mellem Serif og Sans-serif skrifttyper

Bemærk: På computerskærme anses sans-serif-skrifttyper som lettere at læse end serif-skrifttyper.

Nogle skrifttyper

Generic Font Family Examples of Font Names
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

Ejendommen for CSS-skrifttypefamilien

I CSS bruger vi egenskaben font-family til at angive skrifttypen for en tekst.

Bemærk: Hvis skrifttypenavnet er mere end ét ord, skal det stå i anførselstegn, f.eks.: "Times New Roman".

Tip: Egenskaben font-family skal indeholde flere skrifttypenavne som et "faldback"-system, for at sikre maksimal kompatibilitet mellem browsere/operativsystemer. Start med den skrifttype, du ønsker, og slut med en generisk familie (at lade browser vælg en lignende skrifttype i den generiske familie, hvis ingen andre skrifttyper er ledig). Skrifttypenavnene skal adskilles med komma. Læs mere om reserveskrifttyper i næste kapitel.

Eksempel

Angiv nogle forskellige skrifttyper til tre afsnit:

 .p1 {
  font-family: "Times New Roman", Times, serif;
}

  .p2 {
  font-family: Arial, Helvetica, sans-serif;
}

  .p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>