Шрифты Google не работают в Chrome

Question

Шрифты Google не работают в Chrome

0

Как получается, что шрифты Google отлично работают в IE и FF, но не в Chrome? Какой-то забавный, что он не работает в собственном браузере

см. рисунок (хром сверху)

пример приведен на этой странице http://www.europeanhairtransplant.se

Я использую шрифт Magra. Я делаю что-то неправильно?

HTML

<link href='http://fonts.googleapis.com/css?family=Magra' rel='stylesheet' type='text/css'>

CSS

h1, h2, h3, h4, h5, h6 {
    font-family: "Magra", Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
}

ОБНОВИТЬ:

Поскольку Chrome выпустил версию 32, на днях он выглядит лучше, но все же не так хорош, как в FF или IE

WIRN 18 нояб. 2013, в 21:59

Источник

0

Самозавершающиеся теги не являются частью стандартного HTML, только XHTML. Одно это не вызовет проблем.
Ken Franqueiro 18 нояб. 2013, в 20:22
1

Работает для меня. @Legionar HTML5 не такой строгий, как XHTML 1.1, поэтому <link> прекрасно работает без косой черты.
Diego Agulló 18 нояб. 2013, в 20:22
0

Хорошо выглядит для меня в Chrome 32.0.1700.14 beta-m Aura: i.imgur.com/45QazLl.png
Rocket Hazmat 18 нояб. 2013, в 20:24
3

На самом деле это выглядит так, как будто это работает (посмотрите на строчную букву L в трансплантате). Похоже, вес установлен жирным шрифтом.
Jason Sperske 18 нояб. 2013, в 20:25
0

Как и выше, я думаю, что это может быть проблема с весом. Однако следует учитывать использование объявления @import вместо тега ссылки, чтобы гарантировать, что шрифт загружается до того, как ваши объявления CSS будут. Это может не иметь значения, но это упрощает ваш HTML, и я лично считаю, что это делает поддержание стилистических аспектов отдельно от вашей разметки более чистым процессом.
moberemk 18 нояб. 2013, в 20:27
0

У меня в Chrome тоже работает.
Rob 18 нояб. 2013, в 20:31
0

Не это было хорошо известно , вопрос на некоторое время теперь, когда Chrome делает Google Web Fonts странно? google.com/...
patricksweeney 18 нояб. 2013, в 20:55

Показать ещё 5 комментариев

Теги:

html

css

google-chrome

webfonts

2 ответа

Ещё вопросы

Самозавершающиеся теги не являются частью стандартного HTML, только XHTML. Одно это не вызовет проблем.
Работает для меня. @Legionar HTML5 не такой строгий, как XHTML 1.1, поэтому <link> прекрасно работает без косой черты.
Хорошо выглядит для меня в Chrome 32.0.1700.14 beta-m Aura: i.imgur.com/45QazLl.png
На самом деле это выглядит так, как будто это работает (посмотрите на строчную букву L в трансплантате). Похоже, вес установлен жирным шрифтом.
Как и выше, я думаю, что это может быть проблема с весом. Однако следует учитывать использование объявления @import вместо тега ссылки, чтобы гарантировать, что шрифт загружается до того, как ваши объявления CSS будут. Это может не иметь значения, но это упрощает ваш HTML, и я лично считаю, что это делает поддержание стилистических аспектов отдельно от вашей разметки более чистым процессом.
Не это было хорошо известно , вопрос на некоторое время теперь, когда Chrome делает Google Web Fonts странно? google.com/...

Jukka K. Korpela · Answer 1 · 2013-11-18T20-51-00.000Z

Разница (которая не может быть видна в Chrome 31), по-видимому, была вызвана проблемами веса шрифта. Если вы не задаете вес шрифта элемента h1, используется значение по умолчанию для браузера bold (= 700). Так как ваш код вызывает Magra без указания весов, загружается только normal (= 400) вес шрифта. Затем браузеры будут иметь дело с этим по-разному. Они могут использовать обычный шрифт как таковой, или они могут его алгоритмически смелить (что обычно приводит к плохим результатам).

Невозможно решить, что произошло, когда вы сняли снимок экрана. Достаточный код не разглашается. Указанный URL содержит, по крайней мере, теперь декларацию, которая устанавливает вес шрифта до 500, что является нелогичным (шрифт имеет только 400 и 700 весов). Я подозреваю, что скриншот на самом деле из другой версии страницы.

В любом случае, вам просто нужно определить вес и использовать его последовательно. Предполагая, что вы хотите использовать Magra, у вас есть только normal и bold (см. Инструкции Google по шрифту). Если вы хотите нормальный вес, как кажется, просто измените объявление веса шрифта на

font-weight: normal;

И если вам нужно смелое лицо, полностью удалите декларацию font-weight или замените ее на

font-weight: bold;

и измените элемент link так, чтобы он запрашивал как обычный, так и полужирный шрифт (drop 400, если вам нужен только полужирный шрифт):

<link href='http://fonts.googleapis.com/css?family=Magra:400,700' 
      rel='stylesheet'>

Я изменил на 400 сейчас, но это все еще выглядит странно
@ WIRN, где и что изменилось, и как странно выглядит? Вы действительно видите то, что показывает скриншот в вопросе, явно жирный? Какая версия Chrome, какая платформа? Или вы имеете в виду качество рендеринга шрифтов (например, плавность обводки)?
Там, где мы говорили, заголовок (h1). Это не отображается так, как должно быть в Chrome, извините, неуважение, и я благодарен за всю помощь и все, но если вы этого не видите, вы должны обратиться к оптику. Я использую Chrome 31 на Win 8. Вот еще один пример flottiljenbrf.se
Это совсем не то, что вы видите на первом изображении, и я имею в виду не просто контент.

Reinier Kaper · Answer 2 · 2013-11-18T19-35-00.000Z

Вероятно, вы не загружаете правильные шрифты для этого шрифта. Например, вы загружаете по умолчанию (400) вес прямо сейчас, и если вы затем сделаете что-то полужирное, браузер подделает смелый эффект, потому что он не сможет найти жирный шрифт файл.

Шрифт, который вы выбрали, имеет только 400 и 700 весов, поэтому вам может быть лучше найти шрифт с большим весом (как насчет Ubuntu?).

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