Comment utiliser des fichiers de police installés localement sur les pages Web?

Appliquer des polices locales installées dans les pages Web

Dans la conception Web, vous souhaiterez peut-être utiliser une police spécifique qui est déjà installée dans le système, mais l'utilisation du nom de police directement dans CSS ne fonctionne pas. Cet article montrera comment appeler correctement les polices installées localement dans une page Web.

Problème: les polices locales ne peuvent pas être affichées dans les pages Web

Supposons que vous ayez installé la police "Jingnan Mai Round" mais le code CSS:

 html, corps {
  taille de police: 18px;
  Font-Family: "Jingnan Mai Round Body", "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
}

Affichant toujours "Microsoft Yahei" au lieu de "Jingnan Mai Round Body". Vous ne voulez pas charger les fichiers de police via src car les fichiers de police sont de taille grande.

Solution: utilisez les règles @font-face

La clé pour résoudre ce problème est d'utiliser la règle de @font-face , qui vous permet de définir des polices personnalisées et de les appliquer aux éléments de page Web. Étant donné que vous souhaitez utiliser des polices installées localement, il n'est pas nécessaire de spécifier le chemin src . Le navigateur trouvera automatiquement et utilisera les polices installées sur le système.

Le code CSS correct est le suivant:

 @ FONT-FACE {
  Font-Family: «Jingnanmaiyuanti»; / * Définissez le nom de la police, il est recommandé d'utiliser le nom anglais * /
}

html, corps {
  taille de police: 18px;
  Font-Family: 'Jingnanmaiyuanti', "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
}

La clé est:

1. Définissez le nom de la police: Définissez un nom de police facilement reconnaissable (comme le nom anglais) dans la règle @font-face pour éviter les problèmes de compatibilité qui peuvent survenir des noms chinois.
2. Utilisez le nom de la police: utilisez le nom de police défini à l'étape 1 dans font-family . Le navigateur privilégiera la recherche de la police correspondant à ce nom. S'il n'est pas trouvé, des polices alternatives sont utilisées à leur tour.

Après avoir modifié le code CSS, s'il ne parvient toujours pas à afficher, essayez de rafraîchir le cache du navigateur ou de redémarrer le navigateur. Assurez-vous que votre système d'exploitation est correctement installé et activé.

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!