Optimisation des déclarations de police : importation de plusieurs épaisseurs de police avec une seule requête @font-face

Dans les scénarios où une famille de polices comprend plusieurs variantes de poids et style, importer chaque variation individuellement à l'aide de requêtes @font-face distinctes peut devenir fastidieux. Cet article explore la possibilité de consolider ces requêtes en une seule déclaration.

Le défi : importer plusieurs épaisseurs de police

Considérons un scénario dans lequel la police Klavika est disponible dans différentes poids et tailles :

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

La tâche consiste à importer ces variations dans CSS à l'aide d'une seule requête @font-face qui définit le paramètre de poids. Cela élimine le besoin de copier et coller la requête plusieurs fois.

La solution : utiliser la syntaxe étendue de @font-face

Heureusement, @font-face propose une syntaxe étendue syntaxe qui permet d'attribuer différentes valeurs de poids et de style à une seule famille de polices :

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

Dans cet exemple :

• font-family : 'Klavika' définit le nom de la famille de polices.
• src: url(..), suivi du poids correspondant, spécifie les fichiers source pour les variantes régulières et grasses.

Avantages des requêtes de polices consolidées

La consolidation des requêtes de polices offre plusieurs avantages :

• Duplication de code réduite : Évite les requêtes @font-face répétitives pour chaque variation de poids.
• Lisibilité améliorée : Maintient le code CSS organisé et concis .
• Maintenance plus facile : Les modifications apportées aux épaisseurs de police peuvent être effectuées à un seul emplacement.

Ressources supplémentaires

Pour un aperçu complet de cette fonctionnalité et de son utilisation standard, reportez-vous à l'article suivant : [Syntaxe @font-face étendue](https://developer.mozilla.org/en-US/docs/Web/CSS/@font -face.

Exemple de stylo

Voir une démonstration en direct de cette technique dans l'exemple de stylo suivant : [Plusieurs épaisseurs de police avec une seule requête @font-face]( https://codepen.io/anon/pen/abvaqP).