Comment puis-je éviter les téléchargements de polices inutiles avec @font-face pour les polices installées localement ?

@font-face src: local - Éviter les téléchargements de polices inutiles pour les polices installées

@font-face vous permet de définir des polices personnalisées dans votre CSS. Cependant, cela peut parfois conduire à des téléchargements de polices inutiles lorsque l’utilisateur a déjà installé la police localement. Cela peut poser un problème de performances, en particulier pour les navigateurs qui téléchargent des polices pour chaque instance de la déclaration @font-face.

Pour atténuer ce problème, le mot-clé "local" peut être utilisé dans la règle @font-face. pour demander au navigateur de rechercher la police locale avant de tenter de la télécharger. L'extrait de code suivant montre comment utiliser le mot-clé « local » :

<code class="css">@font-face {
  font-family: 'DejaVu Serif';
  src: local('DejaVu Serif'),
       url('DejaVuSerif-webfont.woff') format('woff'),
       url('DejaVuSerif-webfont.ttf') format('truetype'),
       url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
  font-weight: normal;
  font-style: normal;
}</code>

En plaçant le mot-clé « local » avant toute source basée sur une URL, le navigateur tentera d'abord d'utiliser la police DejaVu Serif installée localement. . Si la police locale n'est pas disponible, le navigateur téléchargera alors la police à partir des sources URL fournies.

Cette approche garantit que le navigateur télécharge la police uniquement lorsque cela est nécessaire, améliorant ainsi les performances globales du site Web pour les utilisateurs qui la police est déjà installée.

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!