Ужасный рендеринг @ font-face в Chrome - PullRequest
10 голосов
/ 21 января 2012

Привет,

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

Screenshot

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

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

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

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

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

Спасибо!

Ответы [ 3 ]

4 голосов
/ 03 марта 2012

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

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

2 голосов
/ 21 января 2012

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

Chrome 18.0.1003.1 dev:

enter image description here

Safari 5.1.2 (7534.52.7):

enter image description here

Firefox 9.0.1:

enter image description here

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

enter image description here

Internet Explorer 9.0.8112 (под Parallels VM):

enter image description here

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

0 голосов
/ 01 июля 2013

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

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

...