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

Привет,

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

Screenshot

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

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

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

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

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

Спасибо!

Ответы

Ответ 1

Я вижу почти полную противоположность 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

Opera 11.60 Build 1185:

enter image description here

Internet Explorer 9.0.8112 (под Parallels VM):

enter image description here

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

Ответ 2

fooobar.com/questions/205723/...

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

Ответ 3

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

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