Веб-сайты Google отображают изменчивость в Chrome на Windows

Я использую службу Google Webfonts на своем веб-сайте и в большой степени полагаюсь на нее. Он отлично работает в большинстве браузеров, но в Chrome на Windows он делает особенно плохо. Очень изменчивый и неровный.

Что я выяснил до сих пор, так это то, что Chrome требует, чтобы сначала был загружен шрифт формата .svg. Однако шрифт, который я использую, называется Asap, доступен только в .woff. Я преобразовал его в .svg, используя бесплатный онлайн-сервис, но когда я добавил его в таблицу стилей (до .woff), это ничего не изменило.

Я также пробовал:

-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;

Надеясь, что это поможет сделать текст более плавным.

Сейчас у меня закончились идеи, и я бы не хотел менять шрифты. Кто-нибудь есть идея, как я могу решить эту проблему? Я использую Adobe Browserlab для проверки рендеринга, видя, что у меня только собственный Mac. Ссылка на сайт: www.symvoli.nl/about

Спасибо заранее!

Редактировать 11 апреля 2013 года:

Chrome 35 Beta, похоже, наконец-то решила эту проблему:

Ответы

Ответ 1

Обновление в августе 2014 года

Google, наконец, исправляет эту проблему в Chrome 37 изначально. Но по историческим причинам я не удалю этот ответ.

Проблема

Проблема возникает из-за того, что хром фактически не может отображать шрифты TrueType с правильным сглаживанием. Тем не менее, хром по-прежнему отображает файлы SVG. Если вы переместите вызов вашего svg файла в свой синтаксис выше woff, хром загрузит svg и будет использовать его вместо файла woff. Некоторые трюки, как вы предлагаете, работают хорошо, но только на определенных размерах шрифта.

Но эта ошибка очень хорошо известна команде разработчиков Chrome и работает с июля 2012 года. Смотрите официальный отчет об ошибках здесь: https://code.google.com/p/chromium/issues/detail?id=137692

Обновление октябрь 2013 г. (благодаря @Catch22)

По-видимому, некоторые сайты могут испытывать проблемы с прерывистым интервалом при рендеринге svg. Таким образом, существует лучший способ. Если вы вызываете svg с мультимедийным запросом, специфичным для Chrome, проблемы с интервалом исчезают:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.svg#svgFontName') format('svg');
  }
}

Решение первого подхода:

Синтаксис Flettspring пуленепробиваемый, модифицированный для первого svg:

@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');
}

Дальнейшее чтение:

Ответ 2

-webkit-text-stroke: 0.5px;

используйте его только для большого текста, так как это повлияет на производительность вашей страницы.

Ответ 3

Исправление было предложено здесь, сначала вызвав файл .svg, http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

Ответ 4

Я пробовал ряд решений и, наконец, придумал тот, который работает с более новыми версиями Chrome, которые не подпадают под изменение порядка файлов:

По сути, я переместил файл TTF в отдельный раздел Mozilla.

@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');
}
@-moz-font-face {
    font-family: 'MyWebFont';    
    src: url('webfont.ttf')  format('truetype');
}

Ответ 5

Ответа на этот вопрос Tom и font- spring по какой-то причине не сделали этого. Это исправление Сэм Годдард, хотя:

После экспериментирования я наткнулся на то, что кажется достойным, очень легким решением этой проблемы. Похоже, что Chrome использует файл .svg в наборе @font-face и не хочет, чтобы его называли последним. Ниже приведен стандартный вызов для @font-face с помощью CSS:

// font-face inclusion
@font-face {
  font-family: 'font-name';
                src: url('path-to-font/font-name.eot');
                src: url('path-to-font/font-name.eot?#iefix') format('eot'),
                url('path-to-font/font-name.woff') format('woff'),
                url('path-to-font/font-name.ttf') format('truetype'),
                url('path-to-font/font-name.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

Ответ 6

Это может быть просто шрифт, который вы используете "asap", не делает все так хорошо при определенных размерах. Я изменил размер вашего h1 от 3.5em до 50px, и он выглядит немного лучше. Не может быть идеальным решением, но я заметил, что многие веб-сайты google могут быть непредсказуемыми.

Ответ 7

Я развиваюсь в Firefox. Мой опыт в том, что FF отображает шрифты ttf очень хорошо без каких-либо дополнительных правил (помимо @font-face, вызывающих url для файла шрифта). Однако Chrome - это совсем другая история. Даже с помощью -webkit-font-smoothing: сглаживание; Правило все равно отображает любой шрифт довольно оборванно. У Safari, похоже, нет этой проблемы, поэтому Webkit не по своей сути не может отображать шрифт, это проблема Chrome.

Я не пробовал добавить -webkit-text-stroke: 0.5px; правило, но будет.

Из ответов выше мне очень нравится, что Том Сардуй отвечает лучше всего. Помимо хорошего описания проблемы, он дает большой стек @font-face для использования для всех основных браузеров.

Ответ 8

Еще одна ссылка ссылки для рендеринга веб-шрифтов в хром -

http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

Ответ 9

Было то же самое, ребята. Хорошо во всех браузерах, кроме хром - даже IE10 и 9 были в порядке. Dreamwaeevr CS6 также использует аналогичную версию кода fontsprings, но имеет svg в конце. Измените его для SVG до woff и ttf, и все в мире это хорошо. Тома наткнулся на пример hos, на самом деле это прошлое, что в вашем коде и пути карты к шрифтам, которые вам нужны, и вы в бизнесе!

Ответ 10

Похоже, что Google может обслуживать разные файлы Woff в зависимости от браузера и ОС.

Я обнаружил, что если я загружу шрифт из IE, он примерно на 10 тыс. больше, чем если бы он был сделан на Safari с Mac для определенного шрифта. 43k против 33k. Кроме того, версия IE выглядит отлично на Mac, но версия Mac, похоже, не работает нормально на ПК. Версия Mac выглядит хуже всего в Mozilla Firefox на ПК.

Попробуйте следующее: http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic

SourceSansPro-Regular.woff версия для ПК 27k

SourceSansPro-Regular.woff Apple version 24k

Ответ 11

Я пробовал много способов: - загрузка svg с помощью шрифта -webkit-шрифт-сглаженность ...

после

-webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0);

вращение было более плавным, но основная проблема не исчезла.

Для меня решение добавляло:

-webkit-text-stroke: 0.5px;

Ответ 12

https://www.gettingthingstech.com/how-to-fix-jagged-font-rendering-in-google-chrome/

В этом сообщении немного объясняется экспериментальная функция google chromes. По-видимому, включение опции "DisableWrite" устраняет неровные шрифты. Это, очевидно, машина PER для исправления, но не полная.