Google webfonts рендеринг прерывистый в Chrome на Windows

-webkit-text-stroke: 0.5px;

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

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

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

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

после экспериментов я наткнулся на то, что кажется приличным, очень простым решением этой проблемы. Похоже, что 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;
}

Как видно из примера, the .svg файл занимает последнее место в списке вызываемых URL-адресов. Если мы изменим код для целевых браузеров webkit, скажите им, чтобы они использовали только его .файл SVG.

// 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’);
    }
}

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

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

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

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

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

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

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

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

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

попробовать этот: http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400 italic,600italic

SourceSansPro-Обычный.woff PC версии 27k

SourceSansPro-Обычный.woff Apple версия 24k

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

после

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

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

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

-webkit-text-stroke: 0.5px;

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

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