Une seule requête @font-face peut-elle importer plusieurs épaisseurs de police ?

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 :

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 :

Dans cet exemple :

• font-family : 'Klavika' définit la famille de polices name.
• 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 des épaisseurs de police peuvent être effectuées à un seul endroit.

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.

Example Pen

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).

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!