Comment afficher correctement le 'Jingnan Mai Round Body' installé localement sur la page Web?

Intégration du site Web Police locale: résoudre le problème d'affichage de "Jingnan Mai Round"

Après avoir réussi à installer la police système, comment l'appeler correctement dans la page Web? Cet article résoudra comment utiliser la police "Jingnan Mai Round" installée localement sur le site Web et éviter d'utiliser src pour introduire directement des fichiers de police (car le fichier est plus grand).

Voici un extrait de code CSS courant essayant d'utiliser des polices locales:

 / * @ font-face {
    Font-Family: «Myfont»;
    src: url ('/ style1 / font / jingnanmai rond body.otf') format ('trueType');
} * /
html, corps {
    taille de police: 18px;
    Font-Family: "Jingnan Mai Round Body", "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
}

Bien que "Jingnan Mai Round" soit placé en haut de la liste des polices, la page Web affiche toujours "Microsoft Yahei". Le problème est que le navigateur ne peut pas reconnaître directement le chemin du fichier de police installé localement.

Solution:

Nous devons corriger le code CSS et définir correctement et appliquer des polices personnalisées.

1. Définition des polices (@ font-face): Bien que nous n'utilisions pas src pour introduire directement des fichiers de police, nous avons toujours besoin de la règle de @font-face pour dire au navigateur le nom de police. La clé est que nous n'avons pas besoin de spécifier le chemin du fichier de police et que le navigateur consultera automatiquement la bibliothèque de polices système.

    @ FONT-FACE {
       Font-Family: «Jingnanmaiyuanti»; / * Utilisez un nom de police plus propre * /
   }

2. Appliquer la police: dans font-family , utilisez le nom de police défini à l'étape 1.

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

Grâce aux modifications ci-dessus, le navigateur donnera la priorité à l'utilisation d'une police système appelée "Jingnanmaiyuanti". Si la police est installée sur le système, la page Web s'affiche correctement. S'il n'est pas installé, des polices alternatives sont utilisées à leur tour.

Suggestions supplémentaires:

• Nom de la police: utilisez un nom de police plus simple et plus facile à retenir, tel que JingNanMaiYuanTi , évitez d'utiliser des noms contenant des espaces ou des caractères spéciaux.
• Cache du navigateur: Après avoir modifié CSS, effacez le cache du navigateur ou redémarrez le navigateur pour vous assurer que le navigateur charge les dernières règles CSS.

Avec ces ajustements, vous devriez être en mesure d'afficher avec succès la police "Jingnan Mai Round" sur la page Web, tout en évitant les problèmes de vitesse de chargement causés par l'introduction directe de fichiers de police.

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!