Ужасный рендеринг @font-face в Chrome

Hi,

Мне интересно, есть ли способ заставить Chrome (включая Safari и Opera) лучше отображать шрифты, загружаемые @font-face? Я не уверен, что дело только в этих двух шрифтах, но я искренне сомневаюсь в этом.

Снимок экрана

Верхний снимок — это рендеринг текста в Firefox 8. Нижний — из Chrome(16). Это не беспокоило бы меня так же, если бы в IE он тоже ужасно отображался, но в IE он отображается совершенно чудесно (аналогично FF).

Итак, я попробовал несколько вещей:

  1. Пытался применить text-shadow. Стало немного лучше, но все равно ужасно.
  2. Я пытался использовать -webkit-font-smoothing: antialiased, но это, похоже, не имело никакого эффекта.

Теперь я мог бы перестать быть надоедливым перфекционистом и просто использовать изображение для логотипа (поскольку меньший текст не так уж плохо отображается, но все же плохо, заметьте) и покончить с этим.

Мне не очень нравится это решение, но я приму его, если не будет другого.

Спасибо!


person omninonsense    schedule 21.01.2012    source источник
comment
Можете ли вы опубликовать какой-нибудь код или демо-ссылку, чтобы мы могли поиграть с ним?   -  person ThinkingStiff    schedule 21.01.2012
comment
вы можете попробовать cufon   -  person neworld    schedule 21.01.2012
comment
@neworld это действительно пришло мне в голову, но я бы не хотел, чтобы текст заменялся изображениями (при этом те, которые нельзя скопировать как текст).   -  person omninonsense    schedule 21.01.2012
comment
Я получаю противоположные результаты. Chrome 18 dev и Safari 5.1.2 выглядят великолепно, а FF 9.0.1 полностью темный.   -  person ThinkingStiff    schedule 21.01.2012
comment
Как называется этот шрифт?   -  person Bigood    schedule 20.03.2014


Ответы (3)


Я вижу почти полную противоположность в OS X. Chrome, Safari в порядке, а Firefox не отображается правильно.

Chrome 18.0.1003.1 разработчик:

введите здесь описание изображения

Сафари 5.1.2 (7534.52.7):

введите здесь описание изображения

Фаерфокс 9.0.1:

введите здесь описание изображения

Опера 11.60 сборка 1185:

введите здесь описание изображения

Internet Explorer 9.0.8112 (под Parallels VM):

введите здесь описание изображения

Похоже, что проблемы Windows 7 @font-face довольно распространены, и вообще много нестыковок:

person ThinkingStiff    schedule 21.01.2012
comment
Что это за колдовство?! Какие? О Боже. Я проклят. Д: Как ты это сделал!? Ну, я на Windows 7 (переключусь на канал Chrome Dev, чтобы посмотреть, получу ли я те же результаты). - person omninonsense; 21.01.2012
comment
@withadot. Я на OS X. Кроме того, размер FF выше 100 пикселей выглядит хорошо. - person ThinkingStiff; 21.01.2012
comment
на моей машине winxp с chrome 16 он отображается так же, как на изображении chrome 18 в этом ответе - person Travis J; 21.01.2012
comment
О, да. Я установил Chrome 18-dev; не хорошо. Opera рендерит очень точно так же, как Chrome. - person omninonsense; 21.01.2012
comment
@withadot. Похоже, что результат Трэвиса Дж. может быть специфичным для Windows 7. - person ThinkingStiff; 21.01.2012
comment
Ну, я не думаю, что дальше этого дело пойдет. Спасибо за твою помощь! :D Хо - person omninonsense; 21.01.2012

https://stackoverflow.com/a/9041280/1112665

Если ваш код из шрифта squirrel, это может быть так же просто, как просто изменить порядок некоторых ваших css.

person maximo    schedule 02.03.2012
comment
О, интересно. Я это попробую. Я решил проблему, отказавшись от font-face (поскольку исходный макет тоже изменился). Спасибо! - person omninonsense; 03.03.2012

Вы также можете убедиться, что в первую очередь используется формат SVG. Результатом этого является то, что шрифт будет отлично отображаться в Opera/Chrome, а недостатком является то, что я обнаружил проблемы с высотой строки.

Используйте специальный медиа-запрос для Chrome и замените шрифт исключительно версией SVG.

person Tim Cutting    schedule 01.07.2013