Толщина шрифта игнорируется в Chrome

Я создал скрипку, пытаясь использовать шрифт Open Sans с начальным весом 300:

HTML

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

CSS

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

Я использую шрифты Google для определения CSS < / а>

Я вижу разницу в Firefox (Ubuntu 13.10) при рендеринге с font-weight: 300 (светлый) и с font-weight: 400 (нормальный), но не в Chrome (Version 33.0.1750.117), где все выглядит так, как будто оно отображается в font-weight: 400. Я что-то делаю не так или в Chrome есть ошибка? Есть ли какой-нибудь обходной путь?

Обновление:

С Chrome определенно что-то не так. У меня есть два экземпляра одной и той же страницы, открытые в двух разных окнах в Chrome. Один отображает шрифт нормально (вес 300 соответствует световому варианту), а другой нет (вес 300 соответствует нормальному варианту). Какие-нибудь подсказки? Я обязательно обновил страницу на каждой вкладке, чтобы они были на самом деле одной и той же страницей.

Обновление 2: прикрепленный снимок экрана: с ошибкой: Ошибка рендеринга шрифтов Chrome

Обновление 3. Это не дубликат это. В этом вопросе проблема в том, что «Arial Black» и «Arial» на самом деле разные шрифты. В моем случае Open Sans - единственный шрифт, и проблема в том, что Chrome несколько раз набирал неверный вес. Как видно из снимков экрана, Chrome не соответствует шрифту, отображаемому даже между двумя экземплярами.


google-chrome html fonts css webfonts
person vseguip    schedule 24.02.2014    source источник
comment
Если вы увеличите размер шрифта до 7,5 em, вы заметите небольшую разницу в весе шрифта (я использую Chrome). Если вы добавите -webkit-font-smoothing: antialiased;, вы увидите разницу еще больше.   -  person adaam    schedule 25.02.2014
comment
Вместо того, чтобы использовать все эти вызовы css, почему бы просто не использовать импорт шрифтов Google, т.е. @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700,700italic,800);   -  person ElliotSchmelliot    schedule 25.02.2014
comment
@adaam Я не замечаю разницы ни при 7.5em, ни при использовании -webkit-font-smoothing: antialiased.   -  person vseguip    schedule 25.02.2014
comment
@ElliotSchmelliot Я уже использую импорт шрифтов Google в качестве внешнего ресурса в дудле.   -  person vseguip    schedule 25.02.2014
comment
У вас был установлен Open Sans локально в вашей системе? У меня были проблемы с толщиной шрифта до и после того, как я удалил его из системы, все работало нормально.   -  person Léo Lam    schedule 19.03.2014
comment
@ LéoLam Спасибо! Сработало второй удалил локально.   -  person MiKo    schedule 30.12.2014
comment
@ 0x2D9A3 Спасибо за отзыв! Я разместил его как ответ, так как он работал более чем с одним человеком. Интересно, происходит ли это только в Linux ...   -  person Léo Lam    schedule 30.12.2014
comment
@ LéoLam Нет, я на Win7.   -  person MiKo    schedule 30.12.2014

Ответы (6)


arrow_upward
32
arrow_downward

Добавьте это в свой CSS:

* {-webkit-font-smoothing: antialiased;}
person Fred K    schedule 17.12.2014
comment
Спасибо, это работает. Есть ли этому объяснение? - person Vojtech Ruzicka; 31.08.2016
comment
У меня тоже работает. Узнайте больше о сглаживании шрифтов здесь: szafranek.net/works/articles/font-smoothing- объяснил - person Jibran K; 23.11.2016

arrow_upward
12
arrow_downward

Похоже, это ошибка Chrome / Chromium, вызванная тем, что шрифт установлен локально в вашей системе. Другие браузеры, похоже, не страдают от этой проблемы.

Пока что, похоже, это происходит в Linux и Windows (подтверждено).

По какой-то причине он просто загрузит ваш локальный шрифт и проигнорирует любые ваши font-weight правила, даже если они !important. Это даже не будет соответствовать самому себе: вес шрифта может произвольно меняться между вкладками и перезагрузками страницы.

Самый простой обходной путь - удалить шрифт, но это может стать проблемой, если он вам понадобится для чего-то еще.

Вы также можете попробовать переименовать шрифт во что-то другое, чтобы заставить Chrome использовать ваш веб-шрифт и соблюдать ваши правила шрифтов CSS.

person Léo Lam    schedule 30.12.2014
comment
проблема в том, что если у пользователя установлен шрифт? И попробовать переименовать шрифт во что-нибудь другое, ибо Google Open Sans не так уж и тривиален. - person Niccolò; 11.02.2016
comment
Чтобы решить эту проблему, вам потребуется Chromium. (Не знаю, исправляли ли это недавно.) Что касается переименования шрифта, это так же тривиально, как загрузка шрифта и изменение имени шрифта, когда вы ссылаетесь на него в вашем CSS. Это не так просто, как просто добавить <link> в CSS Google, но это тоже не так сложно. - person Léo Lam; 11.02.2016
comment
Переименование ссылки на шрифт не будет работать в Chrome 56.0.2924.87 - person Dan; 02.03.2017
comment
Ах да. Вот и все. Он отлично отображается в других браузерах и на других устройствах, а для font-weight установлено значение 400, но он отображается как 700. Спасибо! - person dspacejs; 07.04.2017
comment
Я тоже наткнулся на это. Решение для его хорошей работы в Chrome - не использовать @import, а вместо этого включить файл css в раздел ‹head›. Также см. Мой ответ. - person bas; 20.04.2020
comment
Просто добавлю, что ошибка присутствует и в Mac OS. Подробности: версия Chrome 89.0.4389.82 (официальная сборка) (x86_64) и macOS Catalina версии 10.15.6 (19G73) - person Adam Chalcraft; 17.03.2021

arrow_upward
3
arrow_downward

Попробуйте изменить семейство шрифтов на 'Open Sans Light', sans-serif;. У меня была такая же проблема, и это сработало для меня.

person Jamie Kudla    schedule 02.07.2014
comment
Из-за этого шрифт Google не работает для меня ни в одном браузере: «Open Sans Light» не распознается, и все браузеры возвращаются к установленному без засечек, как мне кажется. - person Niccolò; 11.02.2016

arrow_upward
1
arrow_downward

Я наложил их друг на друга, и они хорошо смотрятся на OSX Chrome.

font-weight: 400 !important;

под

font-weight: 300 !important;

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

person jakealbaugh    schedule 25.02.2014
comment
В Linux они все еще выглядят одинаково. - person vseguip; 25.02.2014
comment
На Win Chrome также для меня - person Niccolò; 11.02.2016

arrow_upward
0
arrow_downward

Мое решение - загрузить и установить все типы шрифта на свой компьютер или не устанавливать его вообще. Это странное решение, но мне оно подходит.

person harisrozak    schedule 12.01.2017

arrow_upward
0
arrow_downward

Для меня решением было включить CSS в заголовок вместо использования @import внутри таблицы стилей.

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,700;1,400&display=swap" rel="stylesheet">
person bas    schedule 16.04.2020