CSS font-egenskabskort

I den forrige lektion gennemgik vi mange egenskaber for tekst. Det er ofte ret besværligt at skrive hver af disse egenskaber separat, så for større bekvemmelhed findes der i CSS en speciel egenskabskort font. Denne egenskab gør det muligt at indstille fontstørrelse, familie, fed, kursiv og linjeafstand samtidigt.

Den beskrevne egenskab har følgende syntaks:

font-style font-weight font-size / line-height font-family

Her har rækkefølgen af egenskaber betydning, og font-size og font-family er obligatoriske. Vær opmærksom på, at andre egenskaber, bortset fra dem beskrevet ovenfor i syntaksen, ikke indgår i denne egenskabskort.

Lad os se på eksempler.

Eksempel

Antag, at vi har følgende stilarter:

cssp {
  font-size: 16px;
  font-family: Arial;
}

Lad os omskrive dem ved hjælp af egenskabskortet:

cssp {
  font: 16px Arial;
}

Eksempel

Antag, at vi har følgende stilarter:

cssp {
  font-size: 16px;
  font-family: Arial;
  line-height: 50px;
}

Lad os omskrive dem ved hjælp af egenskabskortet:

cssp {
  font: 16px/50px Arial;
}

Eksempel

Antag, at vi har følgende stilarter:

cssp {
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
}

Lad os omskrive dem ved hjælp af egenskabskortet:

cssp {
  font: bold 16px Arial;
}

Eksempel

Antag, at vi har følgende stilarter:

cssp {
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
  line-height: 50px;
  font-style: italic;
}

Lad os omskrive dem ved hjælp af egenskabskortet:

cssp {
  font: bold italic 16px/50px Arial;
}

Praktiske opgaver

cssp {
  font-family: "Times New Roman";
  font-size: 13px;
  line-height: 20px;
}

cssp {
  width: 300px;
  font-family: Arial;
  color: red;
  font-size: 40px;
  font-weight: bold;
}

cssp {
  font-family: Arial;
  font-size: 40px;
  font-weight: bold;
  text-indent: 50px;
  font-style: italic;
  line-height: 60px;
}