web-dev-qa-db-fra.com

Poids de police ignoré dans Chrome

J'ai créé un violon en essayant d'utiliser la police Open Sans avec un poids de police 300:

HTML

<span class="demo">example</span>

CSS

.demo {
  font-weight: 400 !important;
  font-family: 'Open Sans' !important;
  font-style: normal;
  font-variant: normal;
}

J'utilise des polices Google pour définir le CSS

Je peux voir une différence dans Firefox (Ubuntu 13.10) lors du rendu à un poids de police: 300 (léger) et à un poids de police: 400 (normal) mais aucun dans Chrome (Version 33.0.1750.117 ), où tout semble être rendu au poids de la police: 400. Est-ce que je fais quelque chose de mal ou y a-t-il un bogue dans Chrome? Y a-t-il une solution connue?

Mise à jour :

Il y a certainement quelque chose qui ne va pas avec chrome J'ai deux instances de la même page ouvertes dans 2 fenêtres différentes dans Chrome. L'une rend la police correcte (300 poids correspond à la variante légère) et l'autre est non (le poids 300 est le même que la variante normale.) Des indices? J'ai veillé à rafraîchir la page dans chaque onglet afin qu'ils soient en fait la même page.

Mise à jour 2 : Capture d'écran jointe: du bug: Chrome font rendering bug

Mise à jour 3 Ceci est pas un doublon de this . Dans cette question, le problème est que "Arial Black" et "Arial" sont en fait des polices différentes. Dans mon cas, Open Sans est la seule police et le problème est Chrome ramasser le poids incorrect quelques fois. Comme vous pouvez le voir sur les captures d'écran, Chrome est pas cohérent avec la police rendue même entre deux instances.

30
vseguip

Ajoutez ceci à votre CSS:

* {-webkit-font-smoothing: antialiased;}
20
Fred K

Cela semble être un bogue Chrome/Chromium, provoqué par l'installation locale de la police sur votre système. Les autres navigateurs ne semblent pas souffrir de ce problème.

Jusqu'à présent, cela semble se produire sur Linux et Windows (confirmé).

Pour une raison quelconque, il ne fera que charger votre police locale et ignorer vos font-weight règles, même si elles sont !important. Il ne sera même pas cohérent avec lui-même: le poids de la police peut changer de manière aléatoire entre les onglets et les rechargements de page.

La solution de contournement la plus simple consiste à supprimer la police, mais cela pourrait être un problème si vous en avez besoin pour autre chose.

Vous pouvez également essayer de renommer la police en quelque chose d'autre afin de forcer Chrome à utiliser votre police Web et à respecter vos règles de police CSS.

11
Léo Lam

Essayez de changer la famille de polices en 'Open Sans Light', sans-serif;. J'ai eu le même problème et cela a fonctionné pour moi.

3
Jamie Kudla

je les ai superposés les uns sur les autres et ils ont fière allure sur osx chrome.

font-weight: 400 !important;

sous

font-weight: 300 !important;

http://jsfiddle.net/gpmXe/22/

1
jakealbaugh

Ma solution est de télécharger et d'installer tous les types de poids de la police sur votre machine, ou de ne pas l'installer du tout. C'est une solution étrange, mais ça marche pour moi.

0
harisrozak