web-dev-qa-db-fra.com

Bogue gras de rendu de poids de police d'iOS 4.2+ webfont (ttf)

Celui-ci est assez précis: spécifiez le rendu de la police ttf font-weight:bold incorrectement sur iOS mobile safari, ouvrez le site de démonstration avec iphone/ipad avec iOS 4.2/4.3 Beta 3 ou supérieur:

(c'est Reenie + Beanie de google fonts)

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

Capture d'écran

Vous voyez l'apparence de la police en gras double rendu . Cela n'est pas significatif pour les polices de petite et moyenne taille, mais assez important pour les polices de grande taille/zoom avant

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

Mise à jour: Celui-ci n'est pas corrigé dans iOS5.

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

  1. Utilisation font-weight:normal (comme indiqué dans la démo)
  2. Utilisez soit -webkit-text-stroke ou text-shadow pour le rendre "gras" (plus iPad uniquement css - préfixe du corps ajouté par js, pas seulement la requête média)
iphoneipadioscssmobile-safari
54
vincicat

Eu le même problème avec un h1 héritant du font-weight: bold; d'une classe parente. Remplacez simplement le style hérité par un font-weight: normal;

34
Chris Caldwell

Il semble que Mobile Safari ait une façon boguée de rendre les faux styles avec des font-faces . Pour le gras, il doublera le texte et le décalage, et avec la plupart des polices, il passera inaperçu, mais avec des faces de police fines, il ressemblera à une vision double.

Dans votre cas, le Reenie Beanie n'inclut pas un style en gras , et si vous les utilisez comme titre sans changer le font-weight À normal ou 400 Cela rendra le poids gras "faux style".

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

Solution 1. Utilisez le font-weight Approprié

La meilleure solution consiste donc à modifier le poids de la police en celui fourni par Google Fonts, solution rapide ci-dessous:

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

Solution 2. Utilisez une police qui fournit le style gras/italique que vous souhaitez

L'autre solution consiste à choisir une police dans une archive de polices Web qui contient un style en gras. Les alternatives dans les polices Google qui ressemblent beaucoup à Reenie Beanie et sont "plus audacieuses" seraient par exemple Main de Gochi , Sunshiney , ou Marqueur permanent .

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

Si vous insistez vraiment sur le fait de vouloir un style faux gras, vous pouvez essayer d'utiliser un mince text-shadow ou text stroke .

27
Spoike

n'utilisez pas la balise "plus audacieux" 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 a disparu lorsque j'ai supprimé toute mention de poids de police.

7
Gerry Straathof

Essayez d'appliquer cette règle css:

-webkit-font-smoothing: antialiased;
6
Jonathan Miller