CSS-teckensnitt

Det är viktigt att välja rätt font för din webbplats!

Fontval är viktigt

Att välja rätt font har en stor inverkan på användarupplevelsen på din webbplats.

Rätt font kan skapa en stark image för ditt varumärke.

Det är viktigt att använda lättlästa font. Font ger värde till din text. Det är också viktigt att välja rätt färg och textstorlek för font.

Allmänna fontfamiljer

I CSS finns det fem allmänna fontfamiljer:

  • Serif-font (Serif) - det finns en liten skrivkniv vid varje bokstavs kant. De skapar en formell och elegant känsla.
  • Sans-serif-font (Sans-serif) - fontlinjerna är enkla (ingen småstreck). De skapar en modern och enkel utseende.
  • Monospace-font (Monospace) - här har alla bokstäver samma fast bredd. De skapar ett mekaniskt utseende.
  • Kalligrafisk font (Cursive) - efterliknar människors skrivstil.
  • Fantasy-font (Fantasy) - är en dekorerande/lättsam font.

Alla olika fontnamn tillhör en av de fem allmänna fontserierna.

Skillnaden mellan Serif och Sans-serif-font

Serif vs. Sans-serif

Tips:På datorns skärm anses sans-serif-font vara lättare att läsa än serif-font.

Några fontexempel

Allmänna fontfamiljer Exempel på fontnamn
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

CSS font-family egenskap

I CSS använder vi font-family egenskapen för att definiera textens font.

Font-family egenskapen bör innehålla flera fontnamn som "reserverad" system för att säkerställa högsta kompatibilitet mellan webbläsare/operativsystem. Börja med den font du behöver och avsluta med den allmänna serien (om det inte finns några andra tillgängliga font, låt webbläsaren välja en liknande font i den allmänna serien). Fontnamn bör separeras med kommatecken.

Note:If the font name consists of more than one word, it must be enclosed in quotes, for example: "Times New Roman".

Example

Define different fonts for three paragraphs:

.p1 {
  font-family: "Times New Roman", Times, serif;
{}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
{}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
{}

Try it yourself