La propriété raccourci font en CSS

Dans la leçon précédente, nous avons passé en revue de nombreuses propriétés pour le texte. Il est souvent assez fastidieux de spécifier séparément chacune de ces propriétés, c'est pourquoi en CSS, pour plus de commodité, il existe une propriété raccourcie spéciale font. Cette propriété permet de définir simultanément la taille de la police, la famille, la graisse, l'italique et l'interligne.

La propriété décrite a la syntaxe suivante :

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

Dans ce cas, l'ordre des propriétés a de l'importance, et font-size et font-family sont obligatoires. Veuillez noter que les autres propriétés, hormis celles décrites ci-dessus dans la syntaxe, ne font pas partie de cette propriété raccourcie.

Regardons des exemples.

Exemple

Supposons que nous ayons les styles suivants :

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

Réécrivons-les en utilisant la propriété raccourcie :

cssp {
  font: 16px Arial;
}

Exemple

Supposons que nous ayons les styles suivants :

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

Réécrivons-les en utilisant la propriété raccourcie :

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

Exemple

Supposons que nous ayons les styles suivants :

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

Réécrivons-les en utilisant la propriété raccourcie :

cssp {
  font: bold 16px Arial;
}

Exemple

Supposons que nous ayons les styles suivants :

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

Réécrivons-les en utilisant la propriété raccourcie :

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

Tâches pratiques

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;
}