Comment prioriser les polices locales dans les règles @font-face pour éviter les téléchargements inutiles ?

Utilisation de @font-face : priorité des polices locales

@font-face est un outil puissant pour intégrer des polices personnalisées dans les pages Web. Cependant, cela peut être frustrant lorsque le navigateur télécharge la police même si elle est déjà installée sur le système de l'utilisateur.

Comprendre le problème

Lorsque vous définissez une règle @font-face, vous spécifiez plusieurs fichiers sources. Le navigateur téléchargera généralement tous ces fichiers et installera la police. Par défaut, les polices installées localement ne sont pas prises en compte.

Solution : Prioriser les fichiers locaux

Pour éviter les téléchargements inutiles, vous pouvez prioriser les fichiers locaux dans votre règle @font-face. Voici la syntaxe :

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

Dans cet exemple, le navigateur vérifiera d'abord si la police nommée 'MyFont' est installée localement. Si tel est le cas, la version locale sera utilisée. Sinon, le navigateur téléchargera et installera la police à partir de l'URL spécifiée.

Détection avancée des polices locales

La méthode décrite ci-dessus est un moyen simple de hiérarchiser les fichiers locaux. Cependant, dans certains cas, le navigateur peut toujours télécharger la police même si elle est installée. Pour résoudre ce problème, vous pouvez utiliser une approche plus élaborée :

<code class="css">@font-face {
  font-family: 'Green Sans Web';
  src:
    local('Green Web'),
    local('GreenWeb-Regular'),
    url('GreenWeb.ttf');
}</code>

Cette règle définit deux noms locaux pour la police : "Green Web" et "GreenWeb-Regular". Lors de la résolution de la police, le navigateur recherchera d'abord l'un ou l'autre de ces noms locaux. Si une correspondance est trouvée, la police locale sera utilisée. Sinon, le navigateur aura recours au téléchargement de la police.

En suivant ces techniques, vous pouvez vous assurer que vos règles @font-face donnent la priorité aux polices locales, réduisant ainsi les téléchargements inutiles et améliorant l'expérience utilisateur.

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!