проблема @ font-face с хромом - PullRequest
1 голос
/ 13 июня 2011

Я использовал шрифт Museosans500 со следующим синтаксисом

@font-face {
    font-family: 'MuseoSans500';
    src: url('MuseoSans_500-webfont.eot');
    src: url('MuseoSans_500-webfont.eot?iefix') format('eot'),
        url('MuseoSans_500-webfont.woff') format('woff'),
        url('MuseoSans_500-webfont.ttf') format('truetype'),
        url('MuseoSans_500-webfont.svg#webfontkQkWxTED') format('svg');
    font-weight: normal;
    font-style: normal;
}

В Firefox он работает нормально, но в Chrome неправильно отображает шрифт.

Ответы [ 4 ]

1 голос
/ 18 декабря 2012

Да, это правильно - сначала убедитесь, что вы определили SVG, иначе Chrome будет использовать его для отображения шрифта, и это будет выглядеть неровно.Ставя его первым, вы гарантируете, что Chrome будет использовать одно из более поздних определений для отображения шрифта.

1 голос
/ 13 июля 2011

Я не уверен, с какими проблемами вы сталкиваетесь, но этот веб-сайт http://seanmcb.com/typekit/webkit-antialiasing-test.html дает большое количество тестовых случаев ошибки веб-набора, которые могут быть тем, что вы испытываете.

Я вижу проблему сглаживания на своем собственном сайте и собираюсь попробовать трюк с псевдоэлементом. Ошибка, описанная на сайте: «В браузерах Webkit на Mac шрифты @ font-face отображаются с любой настройкой сглаживания, использованной ранее отрисованным текстом.»

Далее, было бы неплохо проверить, есть ли в биките открытая ошибка для этой проблемы.

0 голосов
/ 13 июля 2012

Поместите формат SVG перед всеми другими в вашем CSS.

0 голосов
/ 06 июля 2011

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

Удачи!

...