Загруженные на Windows шрифты выглядят очень плохо. Какие шрифты вы используете для визуализации лучше?

27

РЕДАКТИРОВАТЬ : Проблема была в том, что у меня не было "Cleartype" включен в моих настройках на Vista. Этот вопрос может не иметь большого значения, если у вас установлен / включен Cleartype в ОС Windows.

В сети появился новый типографский ветер, благодаря которому свойство font-face CSS3 может загружать шрифты, отличные от набора ОС / системы. Мой Mac отлично отрисовывает многие, а мой компьютер с Windows - нет. Какой набор шрифтов следует использовать, чтобы он лучше отображался в Windows?

Это похоже на вопрос о переполнении стека.

И вот пример веб-сайта, который плохо выглядит на ПК с Myriad Pro: http://css-tricks.com/

ПРИМЕЧАНИЕ. Я не говорю о разнице в сглаживании между версиями браузера (например, между IE9 и IE6).

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

Например, на данный момент «League Gothic, 30px» выглядит следующим образом:

введите описание изображения здесь

font-face  subpixel-rendering 
— Littlemad
источник
Можете ли вы предоставить более подробную информацию: на каких браузерах он плохо рендерится? Можете ли вы показать некоторые примеры снимков экрана? Здесь может быть основная проблема с рендерингом, а не проблема со шрифтом
— Pekka поддерживает GoFundMonica
2
Это касается не только браузера, но и операционной системы. Windows имеет рендеринг шрифтов, который отличается от Mac OS. В настоящий момент у меня нет Mac (только Ipod Touch), и я не могу показать разницу, но даже в хорошо отрендеренном браузере для сглаживания, face-font он не очень хорошо реализован для нестандартных шрифтов ОС. Мне было интересно (потому что у меня ограниченный набор шрифтов), которые используют люди, которые не плохо отображаются на ПК.
— Littlemad
@Yi Jiang: Именно потому, что количество шрифтов огромно, и невозможно все это протестировать или получить все, я спрашиваю, каковы, по опыту каждого, «безопасные шрифты и размер» использовать. Я вижу, что никто ничего не публиковал, и я не знаю, будет ли кто-нибудь публиковать что-либо (или пытался проанализировать рендеринг шрифтов на ПК), поэтому мне больше жаль, что я не получил никаких отзывов.
— Littlemad
«Приличный вид» является чисто субъективным.
— DA01

Ответы:

18

Это должно быть комментарием (следовательно, и это CW), но я думаю, что в этом вопросе есть некоторые недоразумения и неправильные предположения. Поскольку вы, очевидно, хотите, чтобы на этот вопрос был дан ответ (вы все-таки предложили вознаграждение), вот мои два цента.

Из вашего скриншота мне кажется, что вы настроили Windows на регулярную визуализацию шрифтов (в отличие от субпиксельного рендеринга), и, возможно, ваш браузер не выполняет сглаживание (возможно, но тогда оно пропало со сжатием JPG).

Следующие примеры, относящиеся к окнам, взяты из XP Pro SP 3, поэтому можно с уверенностью предположить, что ситуация, по крайней мере, находится на том же уровне в Vista & 7.

В Windows есть (в XP) варианты использовать ClearType или нет. Без ClearType шрифты отображаются как на скриншоте. Это сильно увеличенное изображение в диалоге Windows без CT:

доказательство 1

Вы видите, что это двоичная операция: пиксель черный или прозрачный. Теперь с некоторыми современными браузерами даже без CT, они делают некоторое сглаживание. Это с css-tricks.com с Windows XP и Chrome 8 и CT выключен (как это было на предыдущем рисунке):

доказательство 2

Видишь что случилось? Вероятно, вы уже сделали, как вы заявили в своем вопросе.

ПРИМЕЧАНИЕ. Я не говорю о разнице сглаживания, которая существует между новыми браузерами и старыми (например, между IE9 и IE6).

Теперь ClearType !

Вот точно такой же текст из диалога Windows, на этот раз с CT: доказательство 3

Если вам интересно, на чем это основано, см. Статью в Википедии о субпиксельном рендеринге . И влияет ли включение ClearType на рендеринг браузера? Тот же «другой» текст в Windows XP и Chrome 8 и ClearType включен: доказательство 4

Оно делает! И пока мы на этом, я мог бы добавить, что (по крайней мере) IE 8 использует рендеринг ClearType, даже если он отключен на уровне Windows.

Сравнение текста с сглаживанием и ClearTyped на 100% не так радикально, как сравнение текста с сглаживанием и не сглаженного. Это заметно смелее, хотя:

аа: доказательство 5CT:доказательство 6

Чтобы увидеть, как это выглядит без сглаживания, просто посмотрите на скриншот littlemad .

И для сравнения вот тот же «другой» в рендеринге по умолчанию в OS X: доказательство 7 даже более смелый, чем ClearType.

Чтобы ответить на ваш вопрос: любой шрифт . Если ваша операционная система отображает шрифт по-другому, это может быть из-за того, что вы настроили свою операционную систему для отображения шрифтов так . ИЛИ может быть, ваш браузер не поддерживает сглаживание или ClearType.

Другой вопрос заключается в том, почему некоторые шрифты отображаются правильно, а некоторые нет - если это даже так (но я не вижу проблем на сайте, который вы упомянули в Windows). Или вы запрашиваете шрифты, которые выглядели бы адекватно без какого-либо рендеринга?

И вот также ответ на часто задаваемый вопрос: «Да, я знаю все это - почему ClearType выглядит иначе, чем рендеринг OS X ?!»

Потому что они разные. Субпиксельный рендеринг не легкая вещь для реализации. ClearType является зарегистрированным товарным знаком Microsoft и защищен 10 патентами (ожидается + 1; см. Википедию ). Они просто не могут быть одинаковыми.

— оборота коию
источник
Это CW, так что просто отредактируйте его, если я не прав; или добавьте детали, если вы знаете что-то.
— Яри ​​Кейнянен
2
Отличное объяснение коию, это было, как я и подозревал, но не могу быть уверен, пока не
— выложу
Ваш пост заставляет меня сомневаться. Я проверил свои настройки и вспомнил, что когда я устанавливал ОС Vista, я уменьшил до минимума весь эффект, чтобы улучшить производительность. И угадайте, что? Cleartype был отключен. Я такой глупый человек, извините за неудобства. Теперь шрифты выглядят намного лучше, определенно читаемыми. Так знай, мой вопрос больше: с какой ОС Cleartype не установлен на windows?
— Littlemad
@Littlemad без проблем :) Мне тоже было полезно проверить источники, чтобы я мог дать какой-то ответ вместо простого мнения .
— Яри ​​Кейнянен
1
@Littlemad, cleartype впервые появился в Windows XP, хотя по умолчанию отключен. Из Windows Vista он теперь включен по умолчанию. Также в Internet Explorer 7 и далее он включен, даже если он не включен во всей ОС. Источник: en.wikipedia.org/wiki/ClearType
— JamesHenare
2

Если проблема совпадает с вопросом Stackoverflow, на который вы ссылаетесь, то ответ тоже не тот же ?

Это проблема Хинтинга .

Когда вы генерируете свой набор шрифтов (как в FontSquirrel), вы должны указать Hinting в опциях Expert.

Выберите Expert и в разделе Rendering выберите:

Apply Hinting - улучшить визуализацию Win.

— JamesHenare
источник
1
Нет, это не то же самое, Хинтинг не решает проблему. Я уже использую опубликованное в Интернете решение о Font-Face, которое использует Fontsquirell. Что я смотрю, так это: даже если не очень хорошо отображен какой-то шрифт, который выглядит достаточно прилично для использования на ПК? и какой размер шрифта? Я ищу список безопасных шрифтов в безопасном размере. Своеобразная «лучшая практика».
— Littlemad
Рекомендуется не использовать ЛЮБЫЕ встроенные веб-шрифты для размеров текста. Они не оптимизированы для этого. Оставьте их для заголовков и заголовков.
— DA01
1
@ DA01: я веб-дизайнер, я хочу разрабатывать и использовать хорошую типографику, я не могу просто игнорировать шрифты, я хочу выяснить, какие из них можно использовать.
— Littlemad
@Littlemad Я также веб-дизайнер, который хочет разрабатывать и использовать хорошую типографику. Я знаю, что встраивание шрифтов, по крайней мере, на данный момент, использует в основном шрифты, которые не оптимизированы для небольших размеров текста на экранах. Им часто не хватает подсказок, и их показатели могут сильно ухудшить ситуацию, если встроенное лицо недоступно для конкретного пользователя. Использование системных шрифтов, оптимизированных для размеров текста на экранах, - это хорошая типография.
— DA01
1
@ DAO1: Да, я тоже не большой поклонник этой модели, но я пытался указать, что это вопрос хороших или плохих шрифтов, а не то, что встроенные шрифты по своей сути плохие.
— Рассел Леггетт
1

ttfautohint может использоваться для восстановления байт-кода хинтинга шрифта; настройки по умолчанию (совместимые с GDI) должны помочь Windows отображать шрифт.

— Tobu
источник
0

Это не имеет ничего общего с браузером, а с самими окнами.

* nix-системы (unix / linux и OSX включены в этот список, потому что у них есть база Unix) имеют возможность точного управления отображением текста и, как правило, настроены на субпиксельный рендеринг (что имеет гораздо более техническое объяснение, чем то, что я Я собираюсь дать вам, но он по существу использует подпиксели (красная, зеленая и синяя части пикселей вашего экрана) для визуализации текста), где Windows использует cleartype, который является его собственным типом рендеринга, что я немного нечётко на механике.

В значительной степени это просто то, что Windows не выполняет субпиксельный рендеринг, это не шрифты или файлы, а операционная система, отображающая эти шрифты и файлы.

— dkuntz2
источник
Спасибо за объяснение, но я знаю, что проблема в Windows, но я спрашиваю больше: какие шрифты вы тестировали или использовали на своем веб-сайте / клиент-веб-сайте, который вы используете и по-прежнему выглядите «довольно» прилично на Windows?
— Littlemad
На самом деле, это зависит от браузера к браузеру. Firefox и IE будут отображать один и тот же шрифт по-разному, хотя бы потому, что один использует EOT, а другой использует OTF / TTF / WOFF. И ClearType также использует субпиксельный рендеринг. Многие люди просто предпочитают сглаживание шрифтов в OS X, а не Windows.
— Кэлвин Хуан
@Littlemad, что ты имеешь в виду под «довольно приличным», я имею в виду, что я просто смирился с тем фактом, что это не очень красиво. Вот для Windows 8.
— dkuntz2
@ Calvin Huang: да, я знаю о различиях рендеринга в браузере, но это не главная проблема. Это связано с ОС. В настоящее время браузер прилично отображает псевдоним шрифтов. Windows до сих пор нет. @DKuntz: Что вы имеете в виду, говоря «Windows 8»? Я вижу, что многие люди используют на важном веб-сайте шрифт, и действительно ужасно видеть, что хороший дизайнер делает это. Поэтому я ищу меньшее злое решение, все еще плохо отрендеренное, но, по крайней мере, достаточно приличное, чтобы не выглядеть как текст Commodore 16. В противном случае я должен использовать решение js, чтобы проверить ваш браузер и передать стиль CSS, если вы Mac или PC
— Littlemad
4
Это объяснение неверное или, по крайней мере, неполное. Windows делает субпиксельное сглаживание - вот что такое Cleartype и существует с XP. По сравнению с OS X Windows не делает неправильно рендеринг шрифтов , она делает это иначе - в лучшем случае разница субъективна, и вы найдете людей, которые предпочитают, как шрифты отображаются в Windows. В дополнение к этому браузеры в Windows также используют различные методы рендеринга - например, все шрифты в Firefox с большими размерами до 3,6 в Windows будут отображать видимые неровности. Это решено в версии 4 путем переключения на DirectWrite API.
— И Цзян
0

Используйте приведенный ниже код в CSS

-webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

Это может помочь вам

— внештатный веб-дизайнер Хайдараб
источник
2
Пожалуйста, можете ли вы показать фрагмент кода, чтобы показать читателям, что вы имеете в виду?
— Mensch
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.