Font-ominaisuuden lyhenne CSS:ssä

Edellisessä oppitunnissa kävimme läpi monia tekstiin liittyviä ominaisuuksia. Usein on melko työlästä määritellä jokainen näistä ominaisuuksista erikseen, joten CSS:ssä on mukavuuden vuoksi olemassa erityinen lyhenne-ominaisuus font. Tämä ominaisuus mahdollistaa fontin koon, fonttiperheen, lihavuuden, kursivoinnin ja rivivälin asettamisen samanaikaisesti.

Kuvatulla ominaisuudella on seuraava syntaksi:

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

Ominaisuuksien järjestyksellä on merkitystä, ja pakollisia ovat font-size ja font-family. Huomaa, että muita ominaisuuksia kuin yllä syntaksissa kuvatut eivät kuulu tähän lyhenne-ominaisuuteen.

Katsotaan esimerkkien avulla.

Esimerkki

Oletetaan, että meillä on seuraavat tyylit:

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

Kirjoitetaan ne uudelleen lyhenne-ominaisuuden avulla:

p {
	font: 16px Arial;
}

Esimerkki

Oletetaan, että meillä on seuraavat tyylit:

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

Kirjoitetaan ne uudelleen lyhenne-ominaisuuden avulla:

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

Esimerkki

Oletetaan, että meillä on seuraavat tyylit:

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

Kirjoitetaan ne uudelleen lyhenne-ominaisuuden avulla:

p {
	font: bold 16px Arial;
}

Esimerkki

Oletetaan, että meillä on seuraavat tyylit:

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

Kirjoitetaan ne uudelleen lyhenne-ominaisuuden avulla:

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

Käytännön tehtävät

Lyhennä koodia käyttämällä font-lyhenne-ominaisuutta:

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

Lyhennä koodia käyttämällä font-lyhenne-ominaisuutta:

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

Lyhennä koodia käyttämällä font-lyhenne-ominaisuutta:

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