Pour charger correctement les polices personnalisées, vous devez utiliser @ FONT-FACE pour déclarer et faire attention à la compatibilité du format, aux paramètres de la compatibilité, du chemin et du CORS. 1. Utilisez @ FONT-FACE pour définir le nom, la source et le style de la police; 2. Fournir les formats .woff2 et .woff pour assurer la compatibilité du navigateur; 3. Réglez les en-têtes transversaux corrects pour résoudre les problèmes de chargement externes; 4. Vérifiez le chemin du fichier de police pour éviter 404 erreurs; En termes d'optimisation des performances, 5. Chargez le poids de la police au besoin pour réduire la demande; 6. Générez un sous-ensemble de polices pour réduire le volume; 7. Utilisez Font-Display: Swap pour éviter l'invisibilité du texte; Les problèmes courants incluent le cache anciens fichiers → Effacer le cache à afficher, erreur de chemin de fichier → Vérifiez le panneau réseau, orthographe incohérente → Vérifiez le nom de la famille, le caractère non pris en charge → générer des packages de police contenant des caractères chinois couramment utilisés.

L'utilisation des polices CSS personnalisées n'est pas en fait difficile, mais de nombreuses personnes ont tendance à ignorer certains points clés pendant le fonctionnement, ce qui a entra?né une défaillance de chargement des polices ou des performances du site Web affectées. Cet article parle principalement de plusieurs étapes et précautions pratiques, afin que vous puissiez utiliser en douceur des polices personnalisées sur la page Web.

Comment charger correctement les polices personnalisées

Pour utiliser une police personnalisée, vous devez d'abord déclarer la police via la règle @font-face . Cette règle vous oblige à fournir des informations telles que le nom de la police, la source (URL) et le style de police.

 @ FONT-FACE {
  Font-Family: ?MyCustomFont?;
  src: url ('myfont.woff2') format ('woff2'),
       URL ('myfont.woff') format ('woff');
  Police-poids: normal;
  Style de police: normal;
}

Ensuite, vous pouvez l'utiliser comme l'utilisation des polices système:

 corps {
  Font-Family: ?MyCustomFont?, Sans-Serif;
}

Il y a quelques détails à noter:

• Prise en charge du format : il est préférable de fournir aux formats .woff2 et .woff pour être compatible avec plus de navigateurs.
• Problème de domaine croisé : Si vous chargez des fichiers de police à partir d'autres noms de domaine, le serveur doit définir l'en-tête CORS correct.
• L'exactitude du chemin : assurez-vous que le chemin du fichier de police est correct, sinon la police ne sera pas chargée.

Conseils d'optimisation des performances pour les polices personnalisées

Bien que les polices personnalisées puissent rendre le site Web plus beau, sinon géré correctement, cela affectera la vitesse de chargement de la page. Voici quelques suggestions d'optimisation courantes:

• Chargement à la demande : Chargez uniquement les poids des mots dont vous avez besoin (tels que 400 et 700), au lieu de charger toutes les épaisseurs et l'italique à la fois.
• Utilisez le sous-ensemble : si le site Web utilise uniquement l'anglais ou une petite quantité de chinois, vous pouvez générer un sous-ensemble de polices pour réduire le volume.
• Stratégie de chargement des polices : vous pouvez envisager d'utiliser font-display: swap; pour éviter le problème de l'invisibilité du texte.

 @ FONT-FACE {
  Font-Family: ?MyCustomFont?;
  src: url ('myfont.woff2') format ('woff2');
  Police-poids: 400;
  Style de police: normal;
  Font-Display: Swap;
}

De cette fa?on, même si la police n'a pas été chargée, le navigateur affichera d'abord la police alternative et attendra que la police personnalisée soit chargée avant de la remplacer.

Questions et solutions fréquemment posées

Parfois, la police ne semble pas efficace, mais elle peut en fait être causée par les raisons suivantes:

• Le navigateur cache les anciens fichiers de police → effacer le cache ou essayer de voir en mode sans trace
• Le fichier de police n'est pas téléchargé correctement ou le chemin est mauvais → Vérifiez le panneau réseau dans l'outil de développeur pour voir s'il est 404
• Nom de la police Spelling incohérent → Assurez-vous que font-family dans @font-face est exactement la même que le nom lorsqu'il est utilisé
• Certains caractères spéciaux ne sont pas pris en charge → S'il est chinois, vous devrez peut-être générer spécialement un package de polices contenant des caractères chinois couramment utilisés.

Fondamentalement, c'est tout. Les polices personnalisées peuvent sembler simples, mais une légère surveillance en détail peut conduire à afficher des anomalies ou à affecter l'expérience utilisateur. Tant que vous faites attention au chemin, au format et aux performances, vous pouvez généralement l'appliquer en douceur.

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!