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

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

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

Firefox

А вот в Хроме:

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;
}

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

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


css firefox text-rendering
person dude    schedule 15.10.2014    source источник
comment
покажите код шрифта, который вы используете   -  person dippas    schedule 15.10.2014
comment
взгляните на это: stackoverflow.com/questions/4060607/   -  person dippas    schedule 15.10.2014
comment
Впечатляет, это даже не похоже на тот же размер шрифта. Я бы попробовал удалить версию svg для целей отладки: IIRC, только Chrome все равно поддерживает шрифты SVG.   -  person Ulrich Schwarz    schedule 15.10.2014
comment
Да, похоже, что оба браузера используют очень разные механизмы для отображения шрифтов. К сожалению, удаление svg-url ничего не изменило.   -  person dude    schedule 16.10.2014
comment
@dippas Как я уже писал выше, я уже играл с порядком этих команд.   -  person dude    schedule 16.10.2014
comment
можно узнать название шрифта?   -  person Vitorino fernandes    schedule 20.10.2014
comment
Шрифт называется Siemens Sans Bold. Он используется, например. здесь tablet.siemens.com/entry/cc/en. Нижний колонтитул на этой странице показывает проблему со шрифтом.   -  person dude    schedule 21.10.2014
comment
Что, если вы измените порядок загрузки в вашем @font-face и поставите SVG на первое место (как по умолчанию)?   -  person LJ Wadowski    schedule 22.10.2014
comment
@Wado Могу только повторить: как я писал выше, я уже играл с порядком этих команд.   -  person dude    schedule 23.10.2014

Ответы (4)


arrow_upward
3
arrow_downward

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

Чтобы отключить DirectWrite, введите chrome://flags/ в адресной строке и найдите параметр «Отключить DirectWrite». Если это действительно решит проблему, вы должны зарегистрировать ошибку с примерами рендеринга вашего текста, чтобы ее можно было исправить.

Подробнее об этом можно прочитать в блоге Chrome по адресу http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html.

person Bill    schedule 20.10.2014
comment
Спасибо за ваш ответ. Я ищу способ исправить эту проблему со шрифтом, чтобы он выглядел не так по-разному в каждом браузере, а на веб-сайте. Так что изменение настроек браузера или видеокарты для меня не решение, извините. Но все равно интересно! - person dude; 20.10.2014
comment
Если вы отключите DirectWrite и проблема со шрифтом будет устранена, то, к сожалению, это означает, что исправить проблему в коде вашего веб-сайта невозможно. Нет никакого волшебства, чтобы мой шрифт выглядел одинаково во всех браузерах css или html. - person Bill; 20.10.2014
comment
Смотрите мой обновленный пост. Ссылка показывает проблему со шрифтом в нижнем колонтитуле. Как я писал выше, я ищу исправление для firefox. Знаете ли вы способ исправить это на основе Firefox? - person dude; 21.10.2014

arrow_upward
3
arrow_downward

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

person dude    schedule 26.10.2014

arrow_upward
1
arrow_downward

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

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

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

text-shadow: 0px 0px 1px #eeeeee;
person Community    schedule 25.10.2014
comment
Кроме того, шрифты, которые я использую, я сохранил на своем собственном хостинге, потому что, если вы получите их из Google, они не всегда будут загружаться правильно и быстрее. - person ; 25.10.2014
comment
Возможно, это решило проблему с вашим шрифтом, но не со шрифтом, используемым на демонстрационной странице. Я проверил это, как вы сказали, но это не повлияло на проблему. Возможно, «Dosis» — крошечный шрифт, а text-shadow делает шрифт устойчивым в вашем примере. - person dude; 26.10.2014

arrow_upward
0
arrow_downward

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

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

person Ken    schedule 25.10.2014
comment
Вы могли бы проверить это сами. У меня не включено масштабирование на демо-странице, но эффект все равно появляется. - person dude; 26.10.2014