10
votes

Rendu horrible de @ font-face en chrome

salut,

Je me demande s'il y a un moyen de forcer Chrome (Safari et Opera inclus) pour rendre les polices chargées par @ font-face mieux? Je ne sais pas si ce n'est que ces deux polices, mais je doute sincèrement.

capture d'écran

L'instantané supérieur est le rendu du texte dans Firefox 8. Celui ci-dessous est de Chrome (16). Maintenant, cela ne me dérangerait pas comme beaucoup si cela rendait terriblement dans IE, mais dans IE, il rend assez merveilleusement (Similary to FF).

Alors, j'ai essayé quelques choses:

  1. a essayé d'appliquer text-shadow . Cela a fait sembler un peu mieux, mais toujours assez terrible.
  2. J'ai essayé d'utiliser -webkit-fred-lissage: antialiasé , mais cela ne semblait avoir aucun effet du tout.

    Maintenant, je pourrais arrêter d'être un perfectionniste ennuyeux et utiliser simplement une image pour le logo (puisque le texte plus petit ne rend pas si mal, mais toujours mauvais, pensez-vous) et d'être fait avec elle.

    Je n'aime pas vraiment cette solution, mais je vais l'accepter s'il n'y a pas d'autre.

    merci!


5 commentaires

Pouvez-vous poster du code ou un lien de démonstration afin que nous puissions jouer avec cela?


Vous pouvez essayer CUFON


@Neworld Cela a fait de me traverser mon esprit, mais je préfère ne pas avoir le texte remplacé par des images (celles qui ne peuvent pas être copiées en tant que texte, à cela).


Je passe des résultats opposés. Chrome 18 dev et safari 5.1.1.1.1.1. 0.0.1 est tout sombre.


Quel est le nom de cette police?


3 Réponses :


2
votes

Je vois presque exactement le contraire sur le système d'exploitation X. Chrome, safari va bien et Firefox n'affiche pas correctement.

chrome 18.0.1003.1 dev:

Entrez la description de l'image ici

Safari 5.1.2 (7534.52.7):

Entrez la description de l'image ici

Firefox 9.0.1:

Entrez la description de l'image ici

Opéra 11.60 Build 1185:

Entrez la description de l'image ici

Internet Explorer 9.0.8112 (sous Parallels VM):

Entrez la description de l'image ici

On dirait que Windows 7 @ font face-face Les problèmes sont assez courants et il y a beaucoup d'incohérences en général:


6 commentaires

Ce que la sorcellerie est-ce ?! Quoi? Oh mon Dieu. Je suis maudit. D: Comment as-tu fait ça !? Eh bien, je suis sur Windows 7 (passera à Chrome Dev Canal pour voir si je recevrai les mêmes résultats).


@withadot. Je suis sur OS X. En outre, le FF One a l'air bien une tailles supérieure à 100px.


sur ma machine WinXP avec chrome 16, il rend comme il fait sur l'image de Chrome 18 dans cette réponse


Oh oui. J'ai installé Chrome 18-Dev; pas bien. L'opéra rend très étroitement comme chrome.


@withadot. On dirait que les résultats de Travis J pourraient être spécifiques à Windows 7.


Ah bien, je ne pense pas que ça va aller plus loin que cela. Je vous remercie pour votre aide! : D xo



4
votes

https://stackoverflow.com/a/9041280/1112665 ​​

Si votre code provient de la police écureuil, il peut être aussi simple que de réorganiser l'ordre de certains de vos CSS.


1 commentaires

Oh intéressant. Je vais l'essayer. J'ai corrigé le problème par la fontaine de fosses (puisque la mise en page d'origine a également changé). Merci!



0
votes

Vous pouvez également vous assurer que le format SVG est utilisé principalement. Le résultat à ceci est la police qui rendra parfaitement dans l'opéra / chrome, le côté bas est que j'ai trouvé des problèmes de hauteur de ligne survenus.

Utilisez une requête de média spécifique au chrome et remplacez la police avec la version SVG exclusivement.


0 commentaires