8
votes

Firefox Le rendu de la fonte-face semble très différent pour par exemple. Chrome

J'ai des problèmes avec @ font-face dans CSS. La police que j'utilise semble très différente dans chaque navigateur.

Voir cet exemple dans Firefox:

Firefox

et ici dans chrome:

chrome

Je ne sais pas ce qui cause ce problème. J'ai déjà essayé d'utiliser Text-Renduing et j'ai également essayé de modifier l'ordre de l'URL URL dans le @ Font-face Déclaration. < / p>

J'utilise Windows 7 Professional et Firefox V30.

Quelqu'un peut-il m'informer sur la raison de ce problème et dites-moi comment je pourrais le réparer?

Beaucoup merci.

// modifier: Ceci est la déclaration @ font-face que j'utilise: xxx

Comme je l'ai écrit ci-dessus, j'ai déjà joué avec l'ordre de ces commandes.

Dans mon problème particulier, vous pouvez voir Cette page (page de page) montrant le problème.


9 commentaires

Afficher le code Font-face que vous utilisez


Jetez un coup d'œil à ceci: Stackoverflow.com/Questtions/4060607/...


Impressionnant, cela ne ressemble même pas à la même taille de la police. J'essaierais de laisser tomber la version SVG à des fins de débogage: IIRC, seul Chrome prend en charge les polices SVG de toute façon.


Oui, il semble que les deux navigateurs utilisent des moteurs très différents pour rendre les polices. Malheureusement, l'élimination de l'URL SVG n'a rien changé ..


@dippas "Comme je l'ai écrit ci-dessus, j'ai déjà joué avec l'ordre de ces commandes."


Puis-je connaître le nom de police?


La police est appelée Siemens Sans Bold. C'est en usage par exemple Ici Tablet.siemens.com/enterry/cc/en . Le pied de page de cette page montre le problème de la police.


Et si vous modifiez l'ordre du chargement dans votre @ font-face et vous mettrez SVG sur la première place (comme par défaut)?


@Wado, je ne peux que répéter: "Comme je l'ai écrit ci-dessus, j'ai déjà joué avec l'ordre de ces commandes."


4 Réponses :


3
votes

Les navigateurs les plus modernes utilisent DirectWrite sur Windows pour rendre texte, à l'exception du chrome. Heureusement, ils la mettent en œuvre maintenant et il a récemment été défini comme la valeur par défaut dans les dernières constructions de Chrome. C'est la bonne nouvelle, la mauvaise nouvelle est que cela a toujours des bugs et ne rend pas toujours les polices correctement. Vous pouvez voir s'il s'agit d'un problème en le désactivant de voir si cela corrige le problème.

Pour désactiver le type DirectWrite chrome: // drapeaux / dans la barre d'adresse et trouvez l'option étiquetée "Désactiver DIRECTWRITE". Si cela corrige le problème, vous devez enregistrer un bogue avec les exemples de votre rendu de texte afin qu'il puisse être corrigé.

Vous pouvez en savoir plus sur le blog chrome à http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html .


3 commentaires

Merci de votre réponse. Je cherche un moyen de corriger ce problème de police afin qu'il ne semble pas si différent sur chaque navigateur, mais basé sur le site Web. Donc, un changement dans les paramètres du navigateur ou sur la carte graphique ne serait pas une solution pour moi, désolé. Mais c'est toujours intéressant!


Si vous désactivez DirectWrite et que cela corrige votre problème de police, cela signifie malheureusement qu'il n'ya aucun moyen de résoudre le problème dans votre code de site Web. Il n'y a pas de magie 'faire ma police l'air la même dans tous les CSS ou HTML de tous les navigateurs.


Voir mon poste mis à jour. Le lien indique la question de la police dans le pied de page. Comme je l'ai écrit ci-dessus, je cherche une solution pour Firefox. Connaissez-vous un moyen de le réparer Firefox?



1
votes

J'ai eu le même problème et j'ai résolu la petite chose à suivre xxx

En d'autres termes, ajoutez simplement le texte ombre et cela fonctionnera bien, jouez avec les couleurs correctes en tant qu'artiste. Essayez ceci xxx


2 commentaires

Aussi les polices que j'ai utilisées, je les ai sauvegées sur mon propre hébergement car si vous les récupérez de Google, il ne se charge pas toujours correctement plus vite.


Peut-être que cela a résolu le problème avec votre police, mais pas avec la police utilisée sur la page de démonstration. Je l'ai testé comme vous l'avez dit, mais cela n'a pas affecté le problème. Peut-être que la «dose» est une minuscule police et le text-ombre rend la police stable dans votre exemple.



0
votes

Les navigateurs ont des fonctionnalités d'accessibilité qui remplacent CSS. Assurez-vous que les paramètres de texte ou de page ne sont pas de zoom. Voir https: // support.mozilla.org/en-us/kb/font-size-and-zoom-Increase-fsize-of-web-pages

Si rien d'autre que cela ne exclut au moins une variable, en faisant du débogage plus efficace.


1 commentaires

Vous pouvez le tester vous-même. Je n'ai aucun zoom activé sur la page de démonstration, mais l'effet apparaît toujours.



3
votes

Cela semble être un problème de police puisque toutes les opportunités qui travaillent pour d'autres n'affectent pas le problème. La passer à une autre police est la seule solution en ce moment.


0 commentaires