Рендеринг шрифта Firefox выглядит совсем иначе, чем, например, Chrome

у меня проблемы с @font-face в CSS. Шрифт я использую выглядит очень по-разному в каждом браузере.

см. этот пример в Firefox:

Firefox

и здесь, в Chrome:

Chrome

Я не знаю, что вызывает эту проблему. Я уже пытался использовать text-rendering и я также попытался изменить порядок url-свойства @font-face декларации.

Я использую Windows 7 Professional и Firefox V30 он.

может кто-нибудь сообщить мне о причине этой проблемы и подскажите, как я могу это исправить?

большое спасибо.

//редактирование: Это @font-face объявление я использую:

@font-face {
    font-family: 'MyFont';
    src: url('myFont.eot');
    src: url('myFont.eot?#iefix') format('embedded-opentype'),
        url('myFont.svg#myfont') format('svg'),
        url('myFont.woff') format('woff'),
        url('myFont.ttf') format('truetype');
    font-style: normal;
    font-weight : normal;
}

как я уже писал выше, я уже играл с порядком этих команд.

в моей конкретной проблеме вы можете увидеть эта страница (нижний колонтитул) показывает проблему.

8
css firefox text-rendering

4 ответов

большинство современных браузеров используют DirectWrite в Windows для отображения текста, за исключением Chrome. К счастью, они реализуют его сейчас, и недавно он был установлен по умолчанию в последних сборках Chrome. Это хорошая новость, плохая новость заключается в том, что он все еще имеет ошибки и не всегда правильно отображает шрифты. Вы можете увидеть, если это проблема, отключив его, чтобы увидеть, если это устраняет проблему.

чтобы отключить тип DirectWrite chrome://flags/ в адресной строке и найдите опцию с надписью " отключить Перевод на русский язык'. Если это исправит проблему, вы должны зарегистрировать ошибку с примерами рендеринга текста, чтобы ее можно было исправить.

вы можете узнать больше об этом на блоге Chrome на http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html.

3

Это, кажется, проблема шрифта, так как все возможности что работать на других не влияют на проблему. Переход на другой шрифт является единственным решением в данный момент.

3

у меня была та же проблема, и я исправил ее с помощью следующей мелочи

color:#505563;
font-family: 'Dosis', sans-serif;
text-shadow: 0px 1px 2px #eeeeee;

другими словами, просто добавьте текстовую тень, и она будет работать нормально, играть с правильными цветами как художник. Попробуйте это

text-shadow: 0px 0px 1px #eeeeee;
1

браузеры имеют специальные возможности, которые переопределяют CSS. Убедитесь, что параметры текста или страницы не увеличиваются. Вижу https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages

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

0