Веб-шрифты Google выглядят прерывисто в Chrome — как применить исправление

Если вы хотите применить это исправление, вам придется разместить шрифты самостоятельно.

Ваша ссылка на Google Fonts — это запрос на таблицу стилей, которая создается динамически на основе предоставленных вами параметров и при обнаружении браузером. Для вашего примера ссылка:

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

Если вы действительно делаете запрос самостоятельно, используя curl:

$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic

это то, что отправляется обратно:

@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 400;
  src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype');
}
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 700;
  src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype');
}
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 400;
  src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 700;
  src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

Самое простое, что можно сделать, это вернуться в Google Web Fonts, загрузить нужный шрифт, перейдя по адресу здесь и нажмите на стрелку загрузки.

Затем вы можете использовать рекомендуемое здесь исправление, ссылаясь на файлы шрифтов вы скачали:

@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘webfont.svg#svgFontName’) format(‘svg’),
    url(‘webfont.woff’) format(‘woff’),
    url(‘webfont.ttf’)  format(‘truetype’);
}

Вы сделали правильный сброс всех стилей?

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

Reset.css возвращает все элементы к значениям по умолчанию, таким образом уменьшаются несоответствия между браузерами. Есть много примеров для reset.css, один из самых популярных — meyerweb reset css. Другой способ уменьшить несогласованность — использовать normalize.css.

Вкратце, разница между двумя подходами заключается в том, что reset.css просто сбрасывает все стили, специфичные для браузера, в то время как normalize.css имеет более широкий охват, создавая значения по умолчанию для разных браузеров.

Различия между ними объясняются здесь разработчик normalize.css.

Если все эти ссылки не помогают, убедитесь, что вы правильно установили толщину шрифта, и импортируйте все необходимые толщины шрифта.

Вы можете прочитать о весе шрифта здесь: http://css-tricks.com/watch-your-font-weight/ Вы также должны применять эту технику при использовании normalize.ccs, потому что она не сбрасывает вес шрифта, как это делает rest.css.

Добавьте это в свою таблицу стилей для каждого элемента.

opacity: .99;

Например -

p, li { 
  opacity: .99; 
}

Я понятия не имею, почему это работает, но это сработало.