Audacieux bug de rendu des polices avec poids dans iOS 4.2+ webfont (ttf)

Question

Celui-ci est tout à fait spécifiez: spécifiez la police ttf rendu font-weight:bold pas correctement sur iOS mobile safari, ouvrez le site de démonstration avec l'iphone/ipad avec iOS 4.2/4.3 Beta 3 ou au-dessus:

(c'est Reenie+Bonnet de google fonts)

http://jsbin.com/ojeqe3/16/

Capture d'écran

Vous voyez la look caractères gras double rendus. Ce n'est pas significative pour les petites et moyennes taille de la police, mais il est particulièrement important pour les polices de grande taille / de zoom avant

Mon ami va signaler ce bug à apple. Cependant, tout ce qu'il peut faire pour résoudre le bug? (tuer le texte-ajuster n'est pas OK)

Mise à jour: Ce que l'on est pas fixe dans iOS5.

La meilleure solution que je sais pour le problème sera

1. Utiliser font-weight:normal (comme montré dans la démo)
2. Utiliser -webkit-text-stroke ou text-shadow pour donner un aspect "gras" (plus iPad seulement css - corps préfixe ajouté par js, non seulement des médias de la requête)

Answer 1

Avait le même problème avec un h1 héritant du poids de la police: gras; d'une classe parente. Écrasez simplement le style hérité avec un poids de police: normal;

Answer 2

Il semble que le navigateur Safari Mobile a un buggy façon de rendre styles faux avec la police de visages. Pour le gras, il sera le double du texte et de l'offset, et avec la plupart des polices qu'il serait passé inaperçu, mais avec de fines polices, il ressemblera à une vision double.

Dans votre cas, la Reenie Bonnet de ne pas inclure un style audacieux, et si vous les utilisez comme en-tête sans modification de l' font-weight de normal ou 400 il va rendre le gras "faux style".

Veuillez noter que l'utilisation de styles faux est généralement buggy dans certains navigateurs et pas seulement dans le navigateur Safari Mobile.

Solution 1. Utilisation appropriée font-weight

Donc, la meilleure solution est de modifier la police-poids à celui que Google Polices offrent, de la correction rapide ci-dessous:

h1, h2, h3, h4, h5, strong, b { 
    font-weight: 400; 
} 
/* or font-weight: normal */ 

La Solution 2. Utiliser une police qui ne fournissent le gras/italique style que vous souhaitez

L'autre solution est de choisir une police une police web archive qui n' incluent un style audacieux. Des Alternatives à Google Polices qui ressemblent beaucoup à des Reenie Bonnet et sont "plus audacieux" serait par exemple Gochi Main, Sunshiney, ou d'un Marqueur Permanent.

La Solution 3. Faux le faux en utilisant d'autres moyens

Si vraiment vous insistez sur de vouloir un faux gras de style que vous pouvez essayer en utilisant un mince text-shadow ou d' avc de texte.

Answer 3

n'utilisez pas la balise "plus gras" ou "gras". ils ne sont pas nécessaires si vous utilisez une police Web pondérée spécifique.

J'ai eu le même problème. Il est parti quand j'ai enlevé toute mention de font-weight.

Answer 4

Essayez d'appliquer cette règle css:

 -webkit-font-smoothing: antialiased;