Почему шрифт на моем веб-сайте выглядит более гладко в Chrome для Android?

Question

Я использую Windows 7 с включенным ClearType.

На моем сайте я использую шрифт «Счастливая обезьяна» из Google Fonts.

На моем ноутбуке (последняя версия Google Chrome) он вообще не имеет сглаживания, тогда как на моем Nexus 4 (с Chrome) он выглядит так гладко, как на веб-сайте Google Fonts.

Я пробовал font-smooth: auto; под номером body в моей таблице стилей, но это все еще не очень ясно.

Возможно ли это из-за разрешения моего ноутбука по сравнению с моим телефоном (1366x768, 15,6 "против 1280x768, 4.7")?

Даже если я полностью увеличу свой Nexus, вы не увидите ни одного зубчатого края, это абсолютно гладкое.

Моя декларация шрифта

@import url(http://fonts.googleapis.com/css?family=Happy+Monkey); 

body { 
    font: 14px 'Happy Monkey'; 
    font-smooth: auto; // tried with and without this 
} 

Answer 1

Короткий ответ: обвините браузер, если вы в Windows 7, обвините обозреватель и монитор, если находитесь в Windows 8.

Почему Google Chrome на Windows 7 выглядит плохо

Последняя версия Google Chrome на Windows, использует GDI, в API, который обеспечивает наследие визуализации текста. GDI полагается на сильно намеченные шрифты (шрифты, которые явно указывают, как изменить символы, чтобы они выглядели более резкими и менее зубчатыми). Большинство веб-сайтов из Google вряд ли будут обслуживать сильно намеченные шрифты, которые GDI должен сделать гладким текстом.

Во-вторых, GDI не был разработан в те дни, когда преобладали большие размеры шрифтов, поэтому он не отображает гладкий текст при больших размерах шрифта. Это происходит повсеместно даже с системными шрифтами (например, Arial), которые уже хорошо намечены.

Встроенный текстовый рендеринг от Android, однако, просто лучше при визуализации текста.

Обмануть Google Chrome для использования устаревшего API в Windows.

Альтернативы

Internet Explorer 9+ и Mozilla Firefox использовать Direct2D, новый графический интерфейс API, который обеспечивает лучший текстовый рендеринг. Тем не менее, он поддерживается только в Windows Vista и Windows 7. Вы обнаружите, что IE и Fx будут отображать текст более или менее одинаковым в Windows XP, потому что на этой платформе существует только GDI.

Подробнее о Cleartype

Cleartype относится к множеству методов визуализации для сглаживания текста на мониторе. Методы Cleartype, используемые GDI, значительно отличаются от методов, используемых Direct2D. Чтобы еще больше усложнить ситуацию, Direct2D может имитировать разлад Cleartype в GDI или использовать перекрестный скин по умолчанию Cleartype в Direct2D и Cleartype в GDI. Веб-разработчик ничего не может сделать, но надеется, что браузеры выбрали подходящий выбор. Обратите внимание, однако, что один Cleartype может выглядеть более гладко, для других можно подумать, что он выглядит размытым.

Проблема с ОС Windows 8

Как будто все было не достаточно сложным, на Windows 8, в IE 10 и в Windows Store приложения, Cleartype использует оттенки серого сглаживанием вместо субпиксель наложения на как горизонтальная, так и вертикальная оси. Это связано с тем, что в Windows 8 экраны с большей вероятностью будут вращаться, а использование субпиксельного сглаживания будет ломаться, поскольку субпиксели больше не перпендикулярны направлению сглаживания. Поскольку антиалиасинг оттенков серого не использует субпиксели, это выглядит ужасно, если пиксели на вашем мониторе большие (например, монитор с низким разрешением dpi/ppi).

Но эй, разве это не то, что делают Android и iOS?

Сглаживание в оттенках серого - это действительно метод, используемый Android и iOS. Но поскольку эти мобильные устройства имеют такие экраны с высоким разрешением, они выглядят примерно так же хорошо, как предлагалось подпиксельное сглаживание.

Answer 2

Это ответ вместо комментария из-за его длины.

С учетом сказанного, использование шрифта через Google Fonts - это боль прямо сейчас с Google Chrome. Плюс, работа с псевдонимом шрифтов в вообще требует большого количества тестирования и является болью, которая часто требует от вас изучения каких-либо работ для ваших целевых устройств.

Вот некоторые ссылки на проблемы вы столкнулись:

• http://blog.webink.com/font-rendering-in-web-browsers-a-find-your-font-adventure/
• http://blog.typekit.com/category/type-rendering/

Solutions Я Найдено:

• Использовать лучше шрифты.FontSquirrel имеет несколько отличных шрифтов, которые имеют несколько форматов вместо одного .woff из Google Fonts. У них также есть webkit starters, у которых даже есть CSS, написанный для вас.

Если вы пытаетесь загрузить шрифты в Chrome и хотите улучшить рендеринг - обязательно разместите SVG в верхней части объявления. См. here для получения дополнительной информации.

• Избегайте использования пользовательских шрифтов. Позор, но это решение - и часто раз «причудливые» шрифты на самом деле не нужны.

Answer 3

Это действительно связано с различием плотности аппаратных пикселей между двумя устройствами. Cleartype - просто причудливое название искажений, которые Microsoft применяет к формам глифов, чтобы скрыть эффекты crenelation, создаваемые слишком большими пикселями. Он не может полностью скрыть их. Типичная плотность пикселей экрана (96 пикселей на дюйм) на самом деле слишком мала, чтобы отображать правильно текст. На вашей плотности связи гораздо выше, и вы не замечаете отдельных пикселей (и я уверен, что Google даже не беспокоится о том, чтобы скрывать их с эффектами типа Cleartype).

Вы можете легко проверить обломки, вызванные текстом, с низкой плотностью пикселей, сравнив тот же текст с разрешением 600 dpi и 150 dpi. (экраны немного разные, но не разные)