Pourquoi les polices Woff sont-elles suspendues à Firefox

Dépannage des problèmes de chargement des polices WOFF dans Firefox

J'ai rencontré des difficultés à charger une police d'Oswald Woff locale à Firefox, bien qu'elle fonctionne correctement dans Chrome et IE9. L'onglet réseau du navigateur a révélé des demandes suspendues et abandonnées.

Pourquoi woff?

woff (Web Open Font Font) offre plusieurs avantages:

• Compression: Les tailles de fichiers plus petites conduisent à des temps de chargement plus rapides et à une consommation de bande passante réduite par rapport aux polices de truepe ou d'openType non compressées.
• Licence: élargit la disponibilité des polices pour les concepteurs de sites Web, car certains fournisseurs licencient uniquement les polices au format Woff.
• Support large du navigateur: vise la compatibilité universelle entre les navigateurs.

Débogage de la question de Firefox

La documentation de Mozilla sur Woff a été inutile. Bien que la revendication de Firefox 3.6 prenne en charge Woff via @font-face, mon implémentation a échoué. Des suggestions pour définir un type de mime dans le fichier .htaccess d'Apache (AddType application/x-font-woff .woff) et ajouter des en-têtes de mise en cache n'ont pas résolu le problème. caniuse.com Et le blog de Mozilla Hacks a également indiqué le support WOFF, ajoutant davantage à la confusion. L'ajout d'une police de secours TTF (url(fonts/GenR102.ttf) format("truetype")) comme suggéré dans d'autres postes s'est également révélé inefficace. Le chargement JavaScript (à l'aide de l'API des polices Web Google) a fonctionné mais a toujours laissé des demandes de suspension pour les polices spécifiées localement. L'ajout de types de mime dans .htaccess, y compris ceux des polices EOT et TTF avec des en-têtes d'expiration, a donné un succès partiel, mais plusieurs demandes WOFF sont restées suspendues. Ce n'était pas dû à des fichiers manquants; les polices existaient.

le CSS:

Mon CSS comprenait des déclarations séparées @font-face pour différents poids de police Oswald (gras, léger, régulier):

<code class="language-css">@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: local('Oswald Bold'), local('Oswald-Bold'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: local('Oswald Light'), local('Oswald-Light'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');
}

/* custom font */
h1 {
   font-family: 'Oswald', sans-serif; 
}</code>

Les demandes de suspension restantes étaient probablement dues à la gestion par Firefox de plusieurs fichiers Woff pour différents poids de police. Une enquête plus approfondie est nécessaire pour déterminer la cause exacte.

Les questions fréquemment posées sur les polices Woff

(Cette section reste inchangée à partir de l'entrée d'origine, car il s'agit d'une section FAQ distincte et n'a pas besoin de réécrire pour le contexte du problème de dépannage.)

Quelle est la différence entre Woff et d'autres formats de police?

WOFF, ou format de police ouverte Web, est un format de police Web développé par Mozilla, Type Supply et LetterRor. Il est unique car il utilise une version compressée de la même structure SFNT basée sur une table utilisée par TrueType, OpenType et OTF, mais ajoute des métadonnées et des structures de données à usage privé. Cela permet aux polices d'être plus petites et de charger plus rapidement sur les pages Web. Contrairement à d'autres formats, Woff est soutenu par tous les principaux navigateurs.

comment convertir mes polices en woff?

La conversion de vos polices en Woff peut être effectuée à l'aide d'outils en ligne comme le transfoncteur ou le générateur de Font Squirrel. Vous téléchargez simplement votre fichier de police, sélectionnez les formats auxquels vous souhaitez convertir et téléchargez les fichiers convertis. N'oubliez pas de vérifier l'octroi de licences de vos polices avant de vous convertir, car certains peuvent ne pas autoriser la conversion ou l'utilisation du Web.

Pourquoi mes polices Woff ne s'affichent-elles pas correctement dans Firefox?

Si vos polices Woff ne s'affichent pas correctement dans Firefox, cela pourrait être dû à quelques raisons. Tout d'abord, vérifiez si la police est correctement chargée dans votre CSS. Si c'est le cas, essayez d'effacer votre cache de navigateur ou vérifiez si la police est bloquée par la protection de suivi de Firefox. Si le problème persiste, cela pourrait être dû à un bug dans le rendu de Firefox des polices Woff.

Comment utiliser les polices Woff sur mon site Web?

Pour utiliser les polices WOFF dans votre site Web, vous devez d'abord les déclarer dans votre CSS en utilisant la règle @ font-face. Ensuite, vous pouvez utiliser la propriété Font-Family pour appliquer la police aux éléments de votre page. N'oubliez pas d'inclure des polices de secours au cas où la police Woff ne se charge pas.

Les polices Woff sont-elles compatibles avec tous les navigateurs?

Les polices

Woff sont largement prises en charge par tous les navigateurs modernes, notamment Chrome, Firefox, Safari et Edge. Cependant, pour les versions plus anciennes de ces navigateurs ou d'autres navigateurs moins courants, vous devrez peut-être inclure des polices de secours dans votre CSS.

Puis-je utiliser des polices Woff pour des projets commerciaux?

si vous pouvez utiliser des polices Woff pour des projets commerciaux dépend de la licence de la police. Certaines polices sont gratuites pour une utilisation personnelle et commerciale, tandis que d'autres peuvent avoir besoin d'une licence pour une utilisation commerciale. Vérifiez toujours les informations de licence avant d'utiliser une police pour vos projets.

Quels sont les avantages de l'utilisation des polices Woff?

Les polices

Woff ont plusieurs avantages. Ils sont de petite taille, ce qui signifie qu'ils se chargent plus rapidement sur les pages Web. Ils sont également pris en charge par tous les principaux navigateurs, ce qui en fait un choix fiable pour la conception Web. De plus, les polices Woff peuvent inclure des métadonnées et des structures de données à usage privé, qui peuvent être utiles pour les concepteurs de polices et les utilisateurs.

Comment optimiser les polices Woff pour de meilleures performances?

Pour optimiser les polices Woff pour de meilleures performances, vous pouvez utiliser le sous-ensemble de polices pour inclure uniquement les caractères dont vous avez besoin. Cela réduit la taille du fichier de la police, ce qui le rend le chargement plus rapidement. Vous pouvez également utiliser des stratégies de chargement de polices comme la police de police ou l'API de chargement de police pour contrôler comment les polices sont chargées et affichées sur votre page.

Puis-je créer mes propres polices Woff?

Oui, vous pouvez créer vos propres polices Woff. Vous pouvez concevoir votre propre police à l'aide de logiciels comme FontForge ou Glyphes, puis le convertir en Woff à l'aide d'un outil ou d'un logiciel en ligne. N'oubliez pas de vérifier la compatibilité et les performances de votre police dans différents navigateurs.

Qu'est-ce que WOFF2 et en quoi est-il différent de Woff?

WOFF2 est la deuxième version du format de police ouverte Web. Il offre une meilleure compression que Woff, ce qui entraîne des tailles de fichiers plus petites et des temps de chargement plus rapides. Cependant, il n'est pas aussi largement pris en charge que Woff, vous devrez donc peut-être inclure une version Woff de votre police en tant que repli.

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!