Comment puis-je prioriser l'utilisation des polices locales avec @font-face en CSS ?

@font-face src : local - Utiliser les polices locales en toute confiance

Lors de l'intégration de polices personnalisées dans votre code CSS, vous pouvez rencontrer un scénario dans lequel vous souhaitez que le navigateur donner la priorité à l'utilisation de polices installées localement plutôt que de les télécharger à partir d'une source distante. Ce problème survient lors de l'utilisation de @font-face, et les navigateurs peuvent se comporter de manière incohérente concernant les polices téléchargées.

Pour résoudre ce problème, il existe une solution simple que vous pouvez implémenter dans votre code CSS. En incluant « local » comme première source, le navigateur tentera d'utiliser la police du système local de l'utilisateur si elle existe. Votre code modifié devrait ressembler à ceci :

<code class="css">@font-face {
    font-family: 'DejaVu Serif';
    src: local('DejaVu Serif'), url('DejaVuSerif-webfont.eot');
    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>

Avec cette modification, le navigateur vérifiera d'abord la présence de 'DejaVu Serif' sur le système local de l'utilisateur. Si la police est trouvée, elle sera utilisée sans qu'il soit nécessaire de la télécharger. Ce n'est que si la police locale n'est pas disponible que le navigateur procédera au téléchargement des fichiers de police distants.

Reportez-vous à la documentation fournie pour plus de détails : https://developer.mozilla.org/en-US/docs/ Web/CSS/@font-face/src

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!