web-dev-qa-db-fra.com

Chrome ne respecte pas le poids de la police?

Arial est ma police de base et j'essaie d'utiliser une variété de poids de police pour différentes sections de la page (normal, bold/700 et 900).

Cela semble fonctionner correctement dans Firefox et Internet Explorer, mais dans Google Chrome, il ne semble y avoir aucune différence entre bold/700 et 900!?

Voir le violon

(si le lien ci-dessus est cassé/invalide)

HTML:

<p id="one">Testing</p>
<p id="two">Testing</p>
<p id="three">Testing</p>

CSS:

p { font-family: arial; font-size: 40px; margin: 0; }

#one { font-weight: normal; }
#two { font-weight: 700; }
#three { font-weight: 900; }

J'ai googlé un peu et trouvé une question similaire qui fournit une réponse semi-utile:

Résolu avec:

poids de police: 900; famille de fontes: "Arial Black", Arial, sans serif;

Mais l'utilisation de ce qui est simple ci-dessus fait supposer que tout suppose un font-weight de 900 dans Chrome (même si spécifié autrement)

Pour un exemple de ceci voir ici (dans Chrome évidemment)

Est-ce un bug dans Chrome? Ou est-ce que je fais quelque chose de mal ici?

htmlcssgoogle-chromefonts
14
Sean

Arial (au moins la version standard) n'a que deux poids: normal et bold. Si vous spécifiez un poids autre que l'un des deux, le navigateur choisit le poids disponible le plus proche. (Voir: font-weight: 900 ne fonctionnant que dans Firefox )

Arial Black est une police distincte de Arial, c'est pourquoi la réponse semi-utile que vous avez fournie fonctionne.

Si vous voulez travailler avec Arial, essayez:

#one { font-weight: normal; }
#two { font-weight: bold; }
#three { font-family: "Arial Black", Arial, sans-serif; }

L’autre solution consiste à utiliser un service WebFont tel que Typekit ou Webink et à choisir une police avec davantage de grammages disponibles.

18
jeradg

Je pense que ce n'est pas un bug de Google Chrome. Il se peut que la police n’ait pas le poids, 900. Non seulement dans Chrome, mais cela ne fonctionne pas non plus dans Opera et Safari.

Arial Black's normal, 700 et 900, tout est la même dans Safari.

3
madhushankarox

Le problème est "Arial Black". Pour une raison quelconque, Chrome et IE (au fait) ignorent le poids de police avec cette police. Supprimé et votre CSS est appliqué comme prévu.

p { font-family: Arial, sans-serif; font-size: 40px; margin: 0; }

P.S. Maintenant que je vérifie deux fois, 700 et 900 ne sont pas différenciés. 600/900 sont cependant. jeradg a raison.

http://jsfiddle.net/ZjHEn/1/

2
mta

J'ai trouvé la solution.

Merci à LinkedIn.

-webkit-font-smoothing: antialiased;
0
youDontKnow

Si un élément a un poids de police natif autre que normal (tel que b, fort, e), l'ajout de la propriété de poids de police définie sur normal corrigera la police floue. Ceci est une solution temporaire à ce que je suis convaincu qu'il s'agit d'un bogue de Chrome.

0
eugene