Chrome не учитывает вес шрифта?

У меня есть Arial в качестве базового шрифта, и я пытаюсь использовать различные шрифты для разных разделов страницы (обычный, жирный /700 и 900)

Кажется, что это прекрасно работает как в Firefox, так и в Internet Explorer, но в Google Chrome нет абсолютно никакой разницы между жирным шрифтом /700 и 900!?

Смотрите скрипку

(если указанная ссылка повреждена/недействительна)

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; }

Я немного искал Google и нашел аналогичный вопрос, который дает полуполезный ответ:

Решено:

font-weight: 900; font-family: "Arial Black", Arial, sans-serif;

Но использование приведенного выше простого делает все предполагаемым font-weight 900 в Chrome (даже если указано иное)

Пример этого см. здесь (очевидно, в Chrome)

Это ошибка в Chrome? Или я здесь что-то не так?

Ответ 1

Arial (по крайней мере, стандартная версия) имеет только два веса: normal и bold. Если вы укажете вес, который не является одним из этих двух, браузер будет выбирать самый близкий доступный вес. (Смотрите: font-weight: 900, работающий только в Firefox)

Arial Black - это отдельный шрифт от Arial, поэтому предоставленный полу полезный ответ работает.

Если вы хотите работать с Arial, попробуйте:

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

Другой вариант - использовать службу webfont, такую как Typekit или Webink, и выбрать шрифт с более доступными весами.

Ответ 2

Я думаю, что это не ошибка Google Chrome. Возможно, шрифт не имеет веса, 900. Не только в Chrome, но и он не работает в Opera и Safari тоже.

Arial Black нормальный, 700 и 900 все одинаково в Safari.

Ответ 3

Проблема заключается в "Arial Black". По какой-то причине Chrome и IE (кстати) игнорируют шрифт с этим шрифтом. Удалено, и ваш CSS применяется, как ожидалось.

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

P.S. Теперь, когда я дважды проверяю, что 700 и 900 не дифференцированы. 600/900. jeradg прав.

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

Ответ 4

Если элемент имеет собственный вес шрифта, отличный от обычного (например, b, strong, th), добавление свойства веса шрифта, установленного в нормальное состояние, исправит нечеткий шрифт. Это временное решение для того, что я убежден, что это ошибка Chrome.

Ответ 5

Я нашел решение.

Благодаря LinkedIn.

-webkit-font-smoothing: antialiased;