Улучшение рендеринга шрифтов CSS3 @ font-face с помощью ClearType в Windows

Question

Сначала немного справочной информации.

Кажется, что использование правила CSS3 @ font-face может неожиданным и нежелательным образом взаимодействовать с рендерингом шрифтов ClearTypev в любом браузере, в любой версии Windows (XP и выше).

Я впервые задокументировал это как ошибка Каталога шрифтов Google , когда столкнулся с ней. Дальнейшие исследования дают противоречивую информацию; включение или отключение ClearType может помочь или повлиять на отображение шрифта @ font-face в любом веб-браузере в Windows. Помогает ли ClearType или причиняет боль, похоже, полностью зависит от используемого шрифта (-ов) и от того, какие подсказки встроены в них.

Например, поток на сайте поддержки TypeKit , кажется, указывает на проблемы с отображением шрифтов, когда ClearType ОТКЛЮЧЕН. Однако плагин jQuery был разработан для улучшения рендеринга шрифтов, когда ClearType включен, но этот плагин работает только в Internet Explorer. Интересно, что шрифт, используемый на демонстрационных страницах плагина, плохо отображается при включенном ClearType, но когда он отключен, две демонстрационные страницы отображаются одинаково / правильно.

Итак, учитывая всю эту справочную информацию и предыдущие исследования, мой вопрос:

Каков наилучший способ / компромисс для обеспечения достойного рендеринга шрифтов для современных браузеров на всех платформах, независимо от настроек Windows ClearType?

Моей первой идеей было использование таблиц стилей, которые по умолчанию включают шрифты @ font-face. JavaScript может определять операционную систему пользователя и, если обнаруживается Windows, может программно изменять классы таблиц стилей для использования семейств шрифтов, которые не включают шрифты @ font-face, так что используются системные резервные шрифты. Позже я понял, что кто-то еще тоже думал о этом . Это хакерское и не элегантное решение. В идеале я хочу, чтобы мои веб-шрифты работали независимо от платформы, не полагаясь на что-то вроде sIFR или Cufon.

У кого-нибудь есть указатели или лучшие идеи?

Answer 1

Это большая проблема, которая является официальной ошибкой в ​​Google Chrome с июля 2012 года. В августе 2013 года это, похоже, исправлено в большинстве случаев. Однако есть еще примеры, когда шрифты выглядят резкими и неровными.

Решение:

Дайте элементу приличный текстовый штрих:

// try around, find the setting that fits your font-size
webkit-text-stroke: 0.6px; 

// alternative RGBa syntax, allows finer settings with alpha-transparency
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);

Подробнее:

Я написал большую статью в блоге на эту тему, включающую множество скриншотов и 4 различных решения для устранения проблемы: Посмотрите здесь:

Как исправить некрасивый рендеринг шрифтов в Google Chrome

Answer 2

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

Генератор шрифтов fontsquirrel http://www.fontsquirrel.com/fontface/generator оптимизирует шрифты и добавляет их с информацией подсказок / рендеринга, что помогает движку рендеринга шрифтов Windows лучше их отображать.Он также генерирует файлы меньшего размера, которые загружаются быстрее.

Answer 3

Прочтите эту статью о том же:

Сглаживание шрифтов IE7 & 8: http://allcreatives.net/2009/12/05/smoother-font-face-embedding-in-ie-7-8/

В комментариях тоже есть много комментариев. Я искал подобные поддержки в последнее время, без особой радости. Мне пришлось использовать Cufon в одном проекте, потому что клиент хотел очень специфический шрифт. Иногда sIFR и Cufon являются единственными решениями, но, честно говоря, я бы держался подальше от sIFR.

Надеюсь, это поможет.