Шрифт, завантажений у Windows, виглядає дуже погано. За допомогою яких шрифтів ви краще використовуєте цю візуалізацію?


27

EDIT : Проблема полягала в тому, що в моїх налаштуваннях Vista не було включено "Cleartype". Це питання може не мати великого значення, якщо у вас встановлено / увімкнено Cleartype в ОС Windows.


Новий вітер типографіки прибув до Інтернету, з властивістю шрифту CSS3 зможе завантажувати шрифти, окрім набору ОС / системи. Мій Mac робить багато відмінно, поки моя машина Windows не робить. Який набір шрифтів я повинен використовувати, щоб покращити рендеринг в Windows?

Це схоже на питання про Stack Overflow.

Ось приклад веб-сайту, який погано відображається на ПК із Myriad Pro: http://css-tricks.com/

ПРИМІТКА. Я не говорю про різницю в антиаліазному режимі між версіями браузера (наприклад, між IE9 та IE6).

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

Наприклад, на даний момент "League Gothic, 30px" виглядає наступним чином:

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


Чи можете ви надати більш детальну інформацію: На яких браузерах він не відображається добре? Чи можете ви показати деякі приклади знімків екрана? Тут може виникнути основна проблема із відображенням, а не проблема з шрифтом
Pekka підтримує GoFundMonica

2
Це не лише питання браузера, але й операційної системи. У Windows є візуалізація шрифтів, що відрізняється від Mac OS. На даний момент у мене немає Mac (тільки Ipod Touch), і я не можу показати різницю, але навіть у добре виведеному браузері для антиаліасингу, face-font він недостатньо реалізований для не стандартних шрифтів ОС. Мені було цікаво (оскільки у мене обмежений набір шрифтів), які люди використовують, які погано відображаються на ПК.
Littlemad

@Yi Jiang: Саме тому, що кількість шрифту величезна, і неможливо протестувати все це чи мати все це, я запитую, що, з досвіду всіх, що таке "безпечні шрифти та розмір" використовувати. Я бачу, що ніхто нічого не публікував, і я не знаю, чи хтось щось опублікує (чи намагався проаналізувати візуалізацію шрифтів на ПК), тому мені сумніше, що не маю жодного відгуку.
Littlemad

"вид гідного" суто суб'єктивний.
DA01,

Відповіді:


18

Це повинно бути коментарем (отже, внесення цього КЗ), але я думаю, що в цьому питанні є деякі непорозуміння та неправильні припущення. Оскільки ви, очевидно, хочете відповісти на це питання (ви все-таки запропонували щедроту), ось два мої центи.

З вашого екрана мені здається, що ви встановили, що ваша система Windows регулярно рендерує шрифти (на відміну від субпіксельної візуалізації), і, ймовірно, ваш браузер не робить антиалійного (це може, але тоді він перестає стискати JPG).

Наступні приклади, що стосуються Windows, - від XP Pro SP 3, тому цілком безпечно припустити, що ситуація знаходиться принаймні на тому самому рівні у Vista & 7.

У Windows є (в XP) варіанти використовувати ClearType чи ні. Без ClearType шрифти відображаються як на екрані екрана. Це зображення з великим масштабом зображення з діалогового вікна Windows без КТ:

докази 1

Ви бачите, що це двійкова операція: піксель чорний або прозорий. Зараз у деяких сучасних веб-переглядачах навіть без КТ вони роблять антизбудження. Це з сайту 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% не так радикально, як порівняння тексту ClearTyped з неаліазним. Однак помітно сміливіше:

aa: докази 5КТ:докази 6

Щоб побачити, як це виглядає без антиалійного, просто подивіться на скріншот Littlemad .

А для порівняння ось той самий "інший" у візуалізації за замовчуванням OS X: докази 7 ще сміливіший, ніж ClearType.


Щоб відповісти на ваше запитання: будь-який шрифт . Якщо ваша операційна система відображає шрифт по-іншому, це може бути тому, що ви встановили операційну систему для відображення шрифтів так . АБО може бути, що ваш веб-переглядач не здатний антиалійний або ClearType.

Інше питання полягає в тому, чому деякі шрифти відображаються правильно, а деякі - якщо це так (але я не бачу проблем на сайті, про який ви згадували в Windows). Або ви просите шрифти, які б виглядали адекватними, без будь-якого відображення?


І ось також відповідь на часто задаване питання: "Так, я все це знаю - чому ClearType виглядає інакше, ніж рендеринг OS X ?!"

Бо вони різні. Відображення субпікселів - це не легка реалізація. ClearType є зареєстрованою торговою маркою Microsoft, вона захищена 10 патентами (+ 1 очікує на розгляд; див. Wikipedia ). Вони просто не можуть бути однаковими.


Це CW, тому просто відредагуйте його, якщо я помиляюся; або додати деталі, якщо ви знаєте деякі.
Ярі Кейненен

2
Чудове пояснення, кої, це було, як я підозрював, але не міг бути впевнений, поки він не опублікував знімок екрана
JamesHenare

Ваш пост викликає сумніви у мене. Я перевірив свої налаштування, і пам’ятав, що під час встановлення ОС Vista я зменшив до мінімуму весь ефект для підвищення продуктивності. І вгадайте, що? Cleartype було відключено. Я така дурна людина, вибачте за незручності. Зараз шрифти виглядають набагато краще, безумовно, читаються. Тож знаю, моє запитання більше: з якої ОС Cleartype не встановлено на Windows?
Littlemad

@Littlemad немає проблем :) Мені теж було корисно перевірити джерела, щоб я міг дати якусь відповідь замість простої думки .
Jari Keinänen

1
@Littlemad, cleartype вперше був представлений у Windows XP, хоча вимкнено за замовчуванням. Від Windows Vista він тепер увімкнено за замовчуванням. Також в Internet Explorer 7 далі він увімкнено, навіть якщо він не ввімкнено у всій ОС. Джерело: en.wikipedia.org/wiki/ClearType
JamesHenare

2

Якщо питання збігається із запитанням Stackoverflow, на яке ви посилаєтесь, чи не є відповідь однаковою ?

Це проблема натяку .

Коли ви генеруєте набір шрифтів для обличчя (наприклад, у FontSquirrel), вам потрібно вказати натяк на параметри Expert.

Виберіть "Експерт" і під Наданням виберіть:

Застосувати підказку - покращити рендерінг Win.


1
Ні, це не те саме, натяк не вирішує питання. Я вже використовую рішення, опубліковане в Інтернеті про Font-Face, яке використовує Fontsquirell. Що я на це дивлюсь: навіть якщо не відображається добре якийсь шрифт, який з них виглядає достатньо пристойним, щоб використовувати його на ПК? і на якому розмірі шрифту? Я шукаю список безпечного шрифту в безпечному розмірі. Своєрідне посилання на «кращу практику».
Littlemad

Найкраща практика - не використовувати будь-яких вбудованих веб-шрифтів для розміру тексту. Вони не оптимізовані для цього. Залиште їх для заголовків та заголовків.
DA01,

1
@ DA01: Я веб-дизайнер, я хочу створити та використовувати гарну типографіку, я не можу просто ігнорувати шрифти, я хочу з’ясувати, які прийнятні можна використовувати.
Littlemad

@Littlemad Я також веб-дизайнер, який хоче створити та використовувати гарну типографіку. Я знаю, що вбудовування шрифту, принаймні поки що, використовує переважно шрифти, які не оптимізовані для невеликих розмірів тексту на екранах. У них часто не вистачає натяків, і їх показники можуть відрізнятися надзвичайно спритно, якщо вбудоване обличчя не доступне для конкретного користувача. Використання системних шрифтів, оптимізованих під розміри тексту на екранах , використовує хорошу типографіку.
DA01,

1
@ DAO1: Так, я теж не є великим шанувальником цієї моделі, але я намагався зазначити, що справа в справі хороший проти поганих шрифтів, а не те, що вбудовані шрифти по суті є поганими.
Рассел Леггетт


0

Це не має нічого спільного з браузером, але з самим Windows.

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

Насправді це просто те, що Windows не відображає субпікселі, це не шрифти чи файли, а операційна система, що відображає ці шрифти та файли.


Думаю, для пояснення, але я знаю, що проблема - це 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.
Yi Jiang


0

Використовуйте наведений нижче код у CSS

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

Це може вам допомогти


2
Чи можете ви краще показати фрагмент коду, щоб показати читачам, що ви маєте на увазі?
Менш
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.