Создание рендеринга шрифтов шрифтов CSS3 @отлично работает с ClearType в Windows

Сначала немного информации.

Похоже, что использование правила CSS3 @font-face может взаимодействовать неожиданно и нежелательно с помощью ClearType font renderingv в любом браузере в любой версии Windows (XP и выше).

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

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

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

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

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

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

Ответ 1

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

Решение:

Дайте элементу достойный текстовый ход:

// 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

Ответ 2

Ознакомьтесь с этой статьей примерно так же:

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

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

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

Ответ 3

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

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