Comment utiliser les polices locales dans les déclarations @font-face pour optimiser les performances Web ?

@font-face : Utilisation de polices locales sans téléchargements par navigateur

Dans le but d'optimiser les performances Web, les navigateurs téléchargent souvent les polices spécifiées via @ déclarations de police. Cela peut être redondant si le système de l'utilisateur possède déjà la police. Pour éviter cela, pensez à utiliser le mot-clé « local » dans votre déclaration @font-face.

Appliquer le mot-clé « local »

Le mot-clé « local » vous permet pour faire référence à la police par son nom installé sur le système. Pour en profiter, précisez simplement ce qui suit :

<code class="css">@font-face {
  font-family: 'DejaVu Serif';
  src: local('DejaVu Serif'), ...;
}</code>

En plaçant "local" en premier dans la liste src, les navigateurs tenteront d'utiliser la version installée localement de DejaVu Serif avant de la télécharger.

Autres optimisations

Pour une optimisation plus complète des polices, envisagez les étapes suivantes :

• Spécifiez plusieurs formats de police : cela améliore la compatibilité entre différents navigateurs.
• Utilisez un service d'hébergement de polices : des services tels que Font Squirrel fournissent des polices Web optimisées et gèrent la mise en cache pour des performances améliorées.
• Exploitez l'API CSSFontLoading : cette API vous permet de vérifier si une police est chargée et prête. à utiliser, réduisant ainsi le chargement inutile des polices.

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!