дополнительный полужирный шрифт, отображаемый в Chrome как обычный полужирный

Я пытаюсь использовать этот шрифт Open Sans Extra-Bold: https://fonts.google.com/specimen/Open+Sans

По какой-то причине я не могу это показать.

Любая помощь?

JSFiddle: https://jsfiddle.net/0hhbgyrd/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
div {
  font-size: 90px;
  font-family: Open Sans;
  text-transform: uppercase;
}

.normal {
  font-weight: 400;
}

.bold {
  font-weight: 700;
}

.extra-bold {
  font-weight: 800;
}
<div class="normal">
  Blog
</div>

<div class="bold">
  Blog
</div>

<div class="extra-bold">
  Blog
</div>

РЕДАКТИРОВАТЬ: Кажется, это правильно работает в Firefox, но не в Chrome?

Хром:

Как это выглядит в Chrome:

Fire Fox:

Как это выглядит в Firefox:


css sass webfonts
person Community    schedule 27.12.2016    source источник
comment
Кажется, работает правильно в Firefox, но не в Chrome   -  person    schedule 27.12.2016
comment
Это работает правильно в Chrome   -  person Hitesh    schedule 27.12.2016
comment
Кажется, нормально работает в Chrome 54.   -  person nashcheez    schedule 27.12.2016
comment
Попробуйте очистить кеш и перезагрузить. Думаю, это сработает.   -  person Angela Amarapala    schedule 27.12.2016
comment
Я использую Chrome 55, 700 и 800 показывают то же самое.   -  person    schedule 27.12.2016
comment
Это отлично работает в версиях Firefox и Chrome 55.0.x. это может быть проблема с кешем. попробуйте режим инкогнито и проверьте один раз.   -  person Shareer    schedule 27.12.2016
comment
Я также использую Chrome 55, эта проблема может быть локальной (кеш?).   -  person Daniel B    schedule 27.12.2016
comment
Пробовал ctrl + F5, пробовал с аддоном chache killer и без него, пробовал в режиме инкогнито, продолжал получать тот же плохой результат.   -  person    schedule 27.12.2016
comment
Собственно 3-я версия даже чуть меньше?   -  person    schedule 27.12.2016
comment
можете ли вы использовать ‹link href = fonts.googleapis.com/css?family= Open + Sans: 400 700 800 rel = stylesheet ›вместо @import url ('fonts.googleapis.com/css?family=Open+Sans:400,700,800 ');   -  person Shareer    schedule 27.12.2016
comment
При использовании ссылки href вместо импорта ничего не меняется. Но опять же, ничего не меняется, когда я просто удаляю их обоих ...   -  person    schedule 27.12.2016

Ответы (1)


arrow_upward
0
arrow_downward

Исправьте неправильный код @import, предоставленный Google Fonts.

Код импорта, который они предоставляют, также вызывает у меня проблемы, и у него не было меток 'до того, как они обновили всю страницу Google Fonts, поэтому они как бы сломали код в процессе своего обновления.

Я отправил запрос на исправление несколько месяцев назад, когда у них не было кода, заключенного внутри (), что, конечно, тоже не сработало. Они исправили это, но оставили отметки "-марки", так что это работает для некоторых, но, конечно, не для всех.

Так что удалите эти '-марки, и все должно работать нормально:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,800);

вместо того

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');

Я также рекомендую использовать правильную разметку font-family:

font-family: 'Open Sans', sans-serif;
person ProDexorite    schedule 27.12.2016
comment
Ничего не меняет. - person ; 27.12.2016
comment
Вы пытались обновить страницу с помощью Ctrl + F5 после того, как изменили это? - person ProDexorite; 27.12.2016
comment
Добавлено дополнительное исправление (в виде правки), которое делает ваш атрибут font-family более правильным. Последняя версия Chrome, похоже, устраняет эти небольшие ошибки больше, чем предыдущие версии. - person ProDexorite; 27.12.2016
comment
Да, это тоже заметил. Изменили как импорт, так и семейство шрифтов, по-прежнему получаю неправильный результат после Ctrl F5 - person ; 27.12.2016
comment
Это странно. Я также использую новейшую версию Google Chrome, и для меня она работает с этими исправлениями. Вы уверены, что не отменяете какие-либо из этих CSS-стилей позже в своем проекте? - person ProDexorite; 27.12.2016