Як я можу поліпшити зовнішній вигляд шрифту в Google Chrome?


72

Зліва - фаєрфокс 4, праворуч - хром 12.

Ліворуч - Firefox 4, праворуч - хром 12. Чи є спосіб зробити хромоване відображення гарнішими шрифтами?

Наведене вище зображення було зроблено на windows xp. Нижче ще один приклад з Windows 7.

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


Linux чи Windows?
— Nicu Zecheru

Windows. Знімок екрана був зроблений на windows xp. Це трохи краще виглядає на моїй машині Windows 7, але деякі сайти, безумовно, все ще страждають. Ось ще один приклад: i.imgur.com/zbuUr.png
— обіймає

1
Це шрифти ОС за замовчуванням або вбудовані шрифти? (Наприклад, через TypeKit.com)?
— червоний

1
Знаєте, це гарне питання. Це найбільш помітно на вбудованих шрифтах. Веб-безпечні шрифти за замовчуванням виглядають добре. Все на TypeKit.com виглядає зубчастим і жахливим.
— обіймає

На жаль, рендеринг TypeKit виглядає дійсно по-різному в різних комбінаціях браузера / операційної системи. :(
— червоний

Відповіді:


35

Перевірте налаштування ClearType - скріншот Chrome виглядає так, що він змушений робити не антисеанс. Це знищить майже будь-який веб-шрифт, оскільки вони не мають однотонні підказки (з причини розміру серед іншого). Раніше я вважав, що це повідомляється як "IE покращує текст", оскільки він ігнорує ваші налаштування ClearType на рівні ОС і включає його за замовчуванням.


Ого, це була вся проблема. Я думаю, що Firefox також ігнорує чіткі налаштування. Дякую! Насолоджуйтесь своєю винагородою!
— обіймає

6
" він ігнорує ваші налаштування ClearType на рівні ОС і " і що?
— Der Hochstapler

Для мене також працювало поворот прискорення GPU. Дивіться lonesysadmin.net/2011/09/12/…
— Джиммі Богард

5
Куди можна звернутися, щоб перевірити налаштування ClearType?
— chharvey

1
Ця відповідь пояснює, як це зробити на XP - у пуску чи на панелі керування немає "ClearType". superuser.com/a/441694/46972
— ashes999

23

Усі ці відповіді неправильні! Це велика помилка в Google Chrome, перегляньте офіційний звіт про помилку / нитку, включаючи тут багато скріншотів: Офіційний звіт про помилку щодо коду Chrome

Наразі найкращим рішенням є просто дати своєму елементу / заголовку це просте правило:

-webkit-text-stroke: 1px

Доповнення від д-ра Джона: Я знайшов пропозицію, яка html { -webkit-text-stroke: 0.25px}б також працювала - знайшов її тут https://groups.google.com/forum/?fromgroups#!topic/mathjax-users/dV_TmJ1QMO4


Це ще більше покращує його. Як увімкнути цей CSS для всіх сайтів за замовчуванням?
— ShuaiYuan

@shuaiyuancn Вибачте, що? Чому ви маєте на увазі "всі сайти"? Це не має сенсу.
— Sliq

1
Це має ідеальний сенс. Спробуйте думати як про кінцевого споживача, а не про веб-розробника, як вказує оригінальний PO. Я вимкнув пряме записування в chrome: // прапорах і додав глобальне правило -webkit-text-strokeв стильному додатку. Тепер Chrome доставляє мені трохи більше задоволення.
— ShuaiYuan

Я зараз розгублений, роками думав, що суперрусер розшифровується як ludo sudo і є порталом для досвідчених користувачів Linux, а не для звичайних користувачів Інтернету. Хммм ... дивно.
— Sliq

1
Ти неправда помилявся роками. Перевірте мітку: Супер Користувач Для любителів комп'ютерів та енергетичних користувачів. Я також не думаю, що звичайні користувачі не налаштовували б такі шрифти.
— ShuaiYuan

16

Chrome читає налаштування ClearType, які в Windows XP вимкнено за замовчуванням.

  1. Щоб вирішити проблему, спочатку закрийте браузер Chrome.

  2. Тепер клацніть правою кнопкою миші в будь-якому місці робочого столу та виберіть "Властивості" зі спадного меню.

  3. Клацніть на вкладці "Зовнішній вигляд", знайденій вгорі в новому вікні.

  4. І натисніть кнопку "Ефекти".

  5. Другий варіант внизу повинен читати: "Використовуйте наступний метод, щоб згладити краї шрифтів екрану."

  6. Виберіть опцію "ClearType".

  7. Клацніть Застосувати та повторно відкрити веб-переглядач Chrome.

Відтепер Chrome буде виводити ваші шрифти добре анти-псевдонімом для цього плавного ефекту.


2
Це працювало для мене, дещо інші варіанти на Windows 7, хоча
— Gearoid Murphy

2
Він працює без перезавантаження хрому.
— Куазі Ірфан

Мені це не спрацювало на XP, поки я не перезапустив Chrome.
— ashes999

1
Windows 8: Панель управління> Дисплей> Налаштувати текст ClearType> продовжуйте роботу з майстром Далі Далі. Перезапустити браузер - це допомагає.
— грак

Я також повинен був перезапустити комп’ютер, щоб дозволити застосувати зміни ClearType у Windows 10. Прекрасне рішення BTW!
— Простий Сендман

12

Розташуйте SVG-файл вище в правилі css шрифту - 1-й чи другий, наприклад:

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Замість:

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Приклади цього виправлення можна побачити тут:

Приклади шрифту FontSpring Приклади
прикладів


Дуже дякую!! На минулому проекті я помітив, що OTF також виглядає дуже добре, я спробував це на іншому проекті, і це виглядало жахливо! SVG виглядає дуже добре =)
— zzz

6

Увімкнено прискорення GPU в Google Chrome? Введіть about:flagsі шукайте GPU Accelerated Canvas 2D, вимкніть його, якщо він включений. Шрифти на деяких сайтах виглядають дійсно нерівними, коли я переглядаю з увімкненим прискоренням.


У мене раніше це було ввімкнено, але після версії 10 перегляд шрифту вдарив. Я сподіваюся, що Google вирішить цю проблему в якийсь момент.
— червоний

Це було відключено. Я спробував тимчасово ввімкнути це, щоб просто побачити, що буде, і не помітив різниці.
— обіймає

Добре. Якщо вам вдалося знайти те, що було не так, не забудьте оновити тут.
— червоний

У моєму випадку відключення прискорення графічного процесора виправило псевдонім.
— kcbanner

Працювали для мене! Windows 7, Chrome 52
— Vincent

2

У Google Chrome натисніть на гайковий ключ> Параметри> під кришкою> [поруч із веб-вмістом] натисніть кнопку Налаштувати шрифти.

Змініть налаштування так, щоб ваша сторінка виглядала як мояЕкран моїх опцій

Потім натисніть кнопку x і подивіться, чи вирішена ваша проблема.

Якщо це не виправити це, можливо, буде ще одна річ ... але я зачекаю, поки ви спробуєте це.


Вже ідентично: i.imgur.com/zhTBS.png, хоча ви помітите, що навіть порівнюючи наші скріншоти, шрифти за замовчуванням дуже нерівні на моїй машині.
— обіймає

Гаразд ... хто робить вашу відеокарту?
— wizlog

Крім того ... перейдіть на google.com/webfonts - це все такі ж розгублені? Я знаю, що ви зайшли на typekit.com ... але це може бути інакше. Спробуйте переглядати різні фільтри і побачити, чи стосується ваша проблема всіх (наприклад, це просто
— сериф

3
Це змінює шрифти ("шрифти"). Це не має нічого спільного з візуалізацією шрифту .
— Андрес Ріофріо

2

На даний момент Chrome недостатньо добре рендерує веб-шрифти. Для цього існує кілька помилок у їхньому трекері випуску. Будь ласка, позначте зірочкою будь-які відповідні для вас, щоб приділити їм більше уваги.


2

У мене був такий самий випуск: веб-шрифти відображалися з http://www.google.com/webfonts у Chrome. Я спробував усі пропозиції щодо цього та ще кількох інших сайтів, і жоден з них не працював.

Врешті-решт я почав перевіряти властивості CSS постраждалого тексту, виявився власне колір шрифту, який спричинив проблему. Наведений заголовок color:#454545відображатиметься погано, але той самий заголовок дав таке: color:#333добре працював. Слава Богу за специфічні таблиці стилів для агента користувача!


2

У Windows XP я просто змінив опцію анти-псевдонім з "За замовчуванням" на "Очистити тип" на
Дисплеї → Властивості → Зовнішній вигляд → VisualEffects.


2

Chrome приймає системне значення clearType для шрифтів. Якщо краще виглядати в Windows 7, це пояснюється. На Mac, функція Anti-aliase увімкнена для всіх шрифтів вище розміру 8, я думаю. Спробуйте включення або зміни Cleartype вашої машини Windows ,

Оновлення . Схоже, Chrome 22 і новіші ігнорують системні налаштування дляclearType


1

У мене ця проблема була настільки сильно в Windows XP SP3, що зробила Chrome непридатним для всіх намірів та цілей. Я помітив, що я встановив Clear Type Tuning на панелі керування і спробував зняти прапорець "Увімкнути згладжування шрифту" на вкладці "Додаткові". Після перезавантаження Chrome. це було нормально, навіть після ввімкнення режиму згладжування шрифту знову. Я вирішив встановити прапорець "Застосувати всі параметри до стандартних налаштувань для нових користувачів та системи".


1

Для мене це не було налаштування ClearType в Windows 10.1 x64, але виявилося це налаштування в моєму браузері Chrome під назвою DirectWrite.

  1. На вашій адресній панелі типу Chrome: chrome://flags/#directwrite
  2. І ввімкніть DirectWrite, у заголовку цих налаштувань написано Вимкнути DirectWrite і переконайтесь, що на кнопці під ним вказано слово: Увімкнути

Це вирішило для мене проблему.


0

Схоже, що довго і важко відповісти, що ти не можеш. У довідці Chrome є багато дискусій та пропозицій , але я не бачу нічого вагомого.

Велике питання - як ти змушуєш виглядати так погано ?! Я використовую Chrome, щоб набрати це поле ... Я навіть збільшив масштаб цілу купу, і я не бачу нічого подібного до вас. Якщо у вас залишаються питання після цього, ви повинні пояснити свою конфігурацію громаді.


0

Хоча Chrome є "корисним" для шрифтів, він виглядає тонким і вимитим там, де особливо відображає діагональні лінії. IE робить набагато краще, але IE є повільнішим браузером, тому FireFox.

Я вважаю, що це властиво коду для хрому.

BTW, HackToHell, куди мені зайти, щоб змінити колір візуалізації?

Я спробую це.


0

натисніть клавішу Windows + r, а потім введіть cttune.exe

Альтернативним методом є натискання клавіші Windows, а потім введіть чіткий тип, а потім виберіть «Налаштувати текст ClearType»

і дотримуйтесь інструкцій, якщо у вас все ще є проблеми, спробуйте деякі інші приклади

це спрацювало для мене, ви повинні спробувати різні приклади, це дуже схоже на калібрування контрасту / яскравості, але замість тексту

FYI: відключення прискорення 2d може допомогти хромувати гру з інструментом для мелодії Windows


0

Якщо ви хочете, щоб веб-шрифти були читабельні, незважаючи на те, що вимкнення шрифту / чіткість шрифту вимкнено, тоді рішенням слід відключити веб-шрифти в Google Chrome. У такому випадку браузер використовуватиме стандартні шрифти ОС, які відображаються правильно, коли чіткотип / згладжування вимкнено. Для цього передайте /disable-remote-fontsпрапор chrome.exe. Клацніть ярлик на ярлику Google Chrome на робочому столі, виберіть "Властивості", перейдіть на вкладку "Ярлик" та встановіть "Ціль" на:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" /disable-remote-fonts

Може бути одна проблема, коли веб-шрифти вимкнено. Якщо веб-сайт використовує піктограми з веб-шрифтів, вони не відображатимуться.

Відповідна проблема у Chromium tracker:

"Загальносистемний параметр ClearType для веб-шрифтів не дотримується" https://code.google.com/p/chromium/isissue/detail?id=319429


0

Перейдіть до chrome://flags/(або about:flags) та вимкніть опцію Перевизначити список візуалізації програмного забезпечення .

Прискорене 2D-полотно теж слід відключити.

Та комбінація мені допомогла.


-1

Перейдіть на сторінку chrome: // flags / і встановіть "РК-текст антиалійний" увімкнено. Перезапустіть браузер.

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