Веб-шрифты 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

Заранее спасибо!

Edit April 11th, 2013:

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

enter image description here

 Simon East13 авг. 2013 г., 01:11
Это только Google веб-шрифты, которые показывают эту проблему? Или все@font-face шрифты?
 Cody Bonney08 июн. 2012 г., 19:13
Ого, спасибо за то, что подняли это, я никогда раньше этого не замечала. Веб-шрифты Google выглядят очень изменчиво и на моих сайтах.
 Sliq30 авг. 2013 г., 17:30
Я сделал подробный пост в блоге об этом вкл. исправления:How to fix the ugly font rendering in Google Chrome и это также спрашивалось здесь:stackoverflow.com/q/11487427/1114320
 Joey22 апр. 2014 г., 16:12
Chrome 35 Beta, то есть.thenextweb.com/google/2014/04/10/…
 vsync22 апр. 2014 г., 13:46
какой Chrome 35? Это 4 апреля 2014 года, и у меня все еще есть последние 34. Я в замешательстве.

Ответы на вопрос(12)

Решение Вопроса
Update August 2014

orical reasons I won't delete this answer.

Problem

Проблема создана потому чтоchrome actually cannot render TrueType fonts with correct anti-aliasing, Тем не менее, Chrome по-прежнему хорошо отображает файлы SVG. Если вы переместите вызов для вашего файла SVG вверх в вашем синтаксисе выше woff, chrome загрузит SVG и будет использовать его вместо файла woff. Некоторые трюки вроде вас предлагают работать хорошо, но только с определенными размерами шрифта.

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

Update Oct 2013 (Thanks to @Catch22)

Видимо некоторые сайты могут испытыватьintermittent spacing issues when rendering the svg, Так что естьлучший путь скинуть это. Если вы вызовете svg с медиа-запросом, специфичным для Chrome, проблемы с пробелами исчезнут:

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

Пуленепробиваемый синтаксис Fontspring, модифицированный для обслуживания 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');
}
Further reading: CSS properties that affect type rendering Smoother Web Font Rendering in Chrome for Windows How to Bulletproof @font-face Web Fonts
 14 авг. 2013 г., 00:55
почему тогда, если вы звоните из googles cdn (что быстрее и эффективнее), они отправляют истинный тип перед svg. Плохой гугл
 23 июн. 2013 г., 08:39
На самом деле мне не пришлось изменять пуленепробиваемый синтаксис Fontsquirrel / Fontspring & # x2013; Я просто использовал его как есть, и это исправило проблему рендеринга.
 19 дек. 2013 г., 14:57
Сообщение в блоге Fontspring было обновлено, чтобы предлагать использовать специальный медиа-запрос Chrome, чтобы избежать некоторых пробелов при использовании SVG -fontspring.com/blog/smoother-rendering-in-chrome-update
 15 мая 2013 г., 00:12
Это позор, этоstill проблема (последнее обновление 24 апреля 2013 г.)code.google.com/p/chromium/issues/detail?id=137692#c104
 11 июл. 2013 г., 13:55
Где взять SVG-файлы, если доступны только TTF?

шрифт-весна по какой-то причине не сделал этого для меня. Это исправитьСэм Годдард сделал хотя:

After experimenting myself, I stumbled across what appears to be a decent, very easy fix for this issue. It appears that Chrome utilises the .svg file in the @font-face kit, and doesn’t like being called last. Below is the standard call for @font-face using 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;
}

As can be seen in the example, the .svg file comes last in the list of called URLs. If we amend the code to target webkit browsers, then tell them to solely utilize the .svg file.

// Usage
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: ‘font-name';
    src: url(‘path-to-font/font-name.svg’) format(‘svg’);
    }
}
 03 окт. 2013 г., 00:23
Желательно добавить соответствующий пример или информацию, а не просто указать ссылку. Если ссылка когда-либо прекратится; у вас остался не имеющий ответа ответ.
 14 окт. 2015 г., 05:25
Спасибо за указание на это. Я исправил ответ.

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

-loading the svg with font-face -webkit-font-smoothening ...

после

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

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

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

-webkit-text-stroke: 0.5px;
-webkit-text-stroke: 0.5px;

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

 06 июн. 2013 г., 10:56
Как это выглядит на не-Windows Chrome?

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

наконец, нашел решение, которое работает с более новыми версиями 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');
}

asap & quot; не рендерит все это хорошо при определенных размерах. Я изменил размер твоегоh1 от3.5em в50px и выглядит немного лучше. Возможно, это не идеальное решение, но я заметил, что многие веб-шрифты Google могут быть непредсказуемыми

 Joey08 июн. 2012 г., 19:19
Но это, к сожалению, не объясняет, почему он отлично воспроизводится в браузерах на основе OS X и, к моему собственному удивлению, в Internet Explorer. Но если что, я обязательно посмотрю на это решение, чтобы хотя бы немного сгладить его.
 08 июн. 2012 г., 19:32
Есть некоторая хорошая информация об этом и возможное исправление по этой ссылке -vandersterren.com/blog/2012/04/…
 08 июн. 2012 г., 19:26
Google Chrome использует сглаживание, но текст выглядит более пиксельным, чем в других браузерах, поскольку он поддерживает только горизонтальное сглаживание.

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

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

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

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

Я обнаружил, что если я загружаю шрифт из IE, он будет примерно на 10 тысяч больше, чем если бы это было сделано в Safari с Mac для определенного шрифта. 43К против 33К. Кроме того, версия 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, версия 24k

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

Этот пост объясняет немного о экспериментальных функциях Google Chrome. Очевидно, включение & quot; DisableWrite & quot; опция исправляет неровные шрифты. Это, очевидно, исправление за машину, а не в полном объеме.

Ваш ответ на вопрос