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:

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

Lad os omskrive dem ved hjælp af egenskabskortet:

p {
	font: 16px Arial;
}

Eksempel

Antag, at vi har følgende stilarter:

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

Lad os omskrive dem ved hjælp af egenskabskortet:

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

Eksempel

Antag, at vi har følgende stilarter:

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

Lad os omskrive dem ved hjælp af egenskabskortet:

p {
	font: bold 16px Arial;
}

Eksempel

Antag, at vi har følgende stilarter:

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

Lad os omskrive dem ved hjælp af egenskabskortet:

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

Praktiske opgaver

Forkort koden ved at bruge egenskabskortet font:

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

Forkort koden ved at bruge egenskabskortet font:

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

Forkort koden ved at bruge egenskabskortet font:

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