Puis-je importer plusieurs épaisseurs de police avec une seule requête @font-face ?

Interrogation de plusieurs épaisseurs de police avec @font-face

Dans le cas où plusieurs variantes de police sont disponibles avec des épaisseurs et des styles variables, tels que la police Klavika mentionnée, il est naturel de se demander s'il est possible de consolider ces importations en une seule requête @font-face pour éviter les copies répétitives.

La réponse réside dans une forme spécialisée de @font-face qui vous permet de définir le poids dans la requête elle-même.

Par exemple, pour importer la famille Klavika avec différents poids et styles, vous pouvez utiliser les éléments suivants :

@font-face {
  font-family: "Klavika";
  src: url("Klavika-Regular.otf") format("truetype") weight:normal;
  src: url("Klavika-Bold.otf") format("truetype") weight:bold;
  src: url("Klavika-Regular-Italic.otf") format("truetype") weight:normal style:italic;
  src: url("Klavika-Bold-Italic.otf") format("truetype") weight:bold style:italic;
}

Cette approche accorde la possibilité pour spécifier l'épaisseur de police ou le style de police pour n'importe quel élément sans avoir besoin de déclarer explicitement la famille de polices ou de remplacer l'épaisseur et le style de police précédemment définis. Par exemple :

body { font-family:"Klavika", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!