Proprietatea prescurtată font în CSS

În lecția precedentă am analizat multe proprietăți pentru text. Adesea este destul de laborios să specificați separat fiecare dintre aceste proprietăți, deci în CSS pentru o mai mare comoditate există o proprietate specială prescurtată font. Această proprietate permite setarea simultană a dimensiunii fontului, a familiei, a grosimii, a italicului și a interliniei.

Proprietatea descrisă are următoarea sintaxă:

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

În acest caz, ordinea proprietăților contează, și sunt obligatorii font-size și font-family. Atenție la faptul că alte proprietăți, în afară de cele descrise mai sus în sintaxă, nu sunt incluse în această proprietate prescurtată.

Să ne uităm la exemple.

Exemplul

Să presupunem că avem urmatoarele stiluri:

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

Să le rescriem folosind proprietatea prescurtată:

p {
	font: 16px Arial;
}

Exemplul

Să presupunem că avem urmatoarele stiluri:

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

Să le rescriem folosind proprietatea prescurtată:

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

Exemplul

Să presupunem că avem urmatoarele stiluri:

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

Să le rescriem folosind proprietatea prescurtată:

p {
	font: bold 16px Arial;
}

Exemplul

Să presupunem că avem urmatoarele stiluri:

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

Să le rescriem folosind proprietatea prescurtată:

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

Sarcini practice

Prescurtați codul, folosind proprietatea prescurtată font:

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

Prescurtați codul, folosind proprietatea prescurtată font:

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

Prescurtați codul, folosind proprietatea prescurtată font:

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