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

Importation de plusieurs épaisseurs de police avec une seule requête @font-face

En CSS, la règle @font-face est utilisée pour importer des polices personnalisées dans une page Web. Toutefois, l’importation de polices avec plusieurs épaisseurs peut nécessiter plusieurs requêtes. Cet article explore la possibilité d'importer plusieurs épaisseurs de police avec une seule requête.

Problème

Considérez la police Klavika, qui se décline en 8 formes et tailles différentes :

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

Le but est d'importer ces polices en CSS avec une seule requête @font-face, en définissant le poids dans la requête lui-même.

Solution

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}

Pour y parvenir, une saveur particulière de @font-face peut être utilisée :

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

Cette approche associe différents styles et graisses avec différentes polices utilisant le même nom de famille de polices.

Utilisation

Maintenant, vous pouvez spécifier le poids de la police ou font-style pour n'importe quel élément sans spécifier la famille de polices ni remplacer les paramètres existants :

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

Conclusion

En utilisant cette technique, il est possible d'importer plusieurs épaisseurs de police avec un seul @font- requête de visage en CSS, simplifiant le processus et améliorant l'efficacité du code.

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!