Як вирішити проблему нечіткого розмитого шрифту у нових версіях Google Chrome. Які проблеми можуть спостерігатися у браузері

За фактом тестової установки браузера Google Chrome Canary на новий Windows-ПК було виявлено биті шрифти, притому як в інтерфейсі самого браузера, так і на сайтах, які в ньому відкривалися.

Не секрет, що рендеринг далеко не завжди ідеальний, проте такої нагоди саме на цій машині ми не очікували, оскільки з версіями Chrome Stable нічого подібного спостерігати не доводилося.

Але довелося...

Як виглядала згадана проблемка зовні, ви можете подивитися на скрині нижче. Верхню частину ми зробили відразу після установки , а нижню - після усунення бага. І зверніть увагу, це сторінка меню налаштувань (т.зв. chrome://flags page).

Зрозуміло, ми теж припустили, що однією і причин даного явища може бути те, що Canary є найновішою версією браузера, і можливо, в ній ще доробляється-переробляється щось таке, чого ще немає навіть у Стабільній версії Chrome.

Однак подальші роздуми привели до думки про те, що цю проблему цілком собі успішно може створювати також власне «залізо» комп'ютера та/або встановлені на ньому драйвери. До того ж попутне «гуглення» інформації на тему показало, що подібні питання в користувачів періодично виникають ще з часів Chrome 3.

І методи усунення бага застосовувалися теж різні, зокрема відключення або DirectWrite, запуск Chrome з різними стартовими параметрами та ін. Майже всі з них за давністю років, звичайно, для останніх версій браузера вже не є актуальними. Але дещо з «класики», як виявилося, не втратило колишню ефективність. Отже.

що робити, якщо в Google Chrome Canary з'явилися биті шрифти:

заходимо до « Налаштування » (через chrome://settings/або через « Меню«);
прокручуємо сторінки в самий низ і клацаємо « Додаткові «;
далі знову прокручуємо сторінку до розділу « Система«;
і в ньому відключаємо функцію « Використовувати апаратне прискорення (за наявності) «;
перезапускаємо Chrome.

Після цього биті шрифти "виправилися" самі. Але варто також відзначити, що відключення функції апаратного прискорення в даній конкретній ситуації слід сприймати, як менше із лих, оскільки це може негативно позначитися на продуктивності браузера в ряді випадків (точніше, при виконанні деяких завдань). Втім, включити функцію можна будь-якої миті, повторивши наведений алгоритм дій.

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

У старих версіях, до виходу 51-ої, розв'язання цієї проблеми не становило великої праці, але з появою 52 версії користувачам розробники зробили справжній сюрприз, на жаль, неприємний.

Як змінити шрифти, що не читаються

Автори Google Chrome вирішили прибрати можливість проведення персонального налаштування зовнішнього вигляду шрифту за допомогою експериментального параметра "Вимкнути DirectWrite Windows", що і був справжнім рятувальним колом для користувачів, які страждають від нечіткого шрифту. Зараз його прибрали.

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

Проблеми під час роботи в браузері

Проблема з відображенням шрифтів виявляється різним чином.

Спочатку необхідно з'ясувати, яку версію Google Chrome у вас встановлено, для чого потрібно набрати в адресному рядку chrome://help/ і натиснути на введення. Відразу ж відкриється сторінка «про програму».

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

Існує лише 2 варіанти вирішення цієї проблеми:

Почати працювати з іншим браузером, наприклад, Firefox. Остання версія Opera так само, як і Хром має ряд проблем з відображенням шрифтів, зокрема з його кольором, що пояснюється однаковим двигуном, на якому вони були розроблені.
Зробити відкат Google Chrome до попередньої версії, коли подібних проблем не було, і налаштувати параметр DirectWrite. Однак тут є один нюанс: виконати відкат за допомогою налаштувань самого браузера не вийде, оскільки немає подібної опції. Навіть при видаленні поточної версії Google Chrome на офіційному сайті розробників не можна буде знайти інсталяційні файли ранніх версій.

Відкат на попередню версію Chrome

Для того, щоб це зробити, потрібно дотримуватися такої схеми:

Перш ніж виконати видалення браузера, необхідно зробити синхронізацію всієї потрібної інформації з обліковим записом Google Chrome, щоб не втратити їх. Для цього потрібно набрати в адресному вікні браузера chrome://settings/syncSetup, після чого натиснути введення. Після цього відкриється вікно, де позначте потрібні вам пункти, а краще просто оберіть опцію «Синхронізувати все». Тепер потрібно трохи часу почекати доки не завершиться синхронізація, особливо якщо до цього моменту ця опція була у відключеному стані.

Після того, як проведете установку попередньої, нормально працюючої версії Google Chrome, за допомогою знову ж таки синхронізації потрібно поміняти всі налаштування браузера на раніше використовувані, обов'язково перед цим вимкнувши автоматичне оновлення до нової версії, інакше Хром поверне все як було, а ви витратите тільки дарма Свого часу.

Вимкнути оновлення Хрому

Щоб Google Chrome самостійно не оновився, слід скористатися однією хитрістю. Перейдіть до папки c:\Program Files\Google\Update\ або c:\Program Files (x86)\Google\Update\, якщо на вашому комп'ютері операційна система 64-бітної версії, і видаліть один файл GoogleUpdate.exe.

У мережі можна знайти велику кількість рекомендацій, в яких наполягають на проведенні редагування записів реєстру, зміни групової політики Windows, додаванні адміністративних шаблонів тощо. Як правило, більшість таких інструкцій була складена тими користувачами, які всього цього і самі не робили, а тільки переписали раніше побачене на якомусь форумі. Для вирішення такого завдання всі ці дії не потрібні. Достатньо видалити файл GoogleUpdate.exe та Google Chrome самостійно більше не оновиться.

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

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

шрифт у гугл хром змінився (4)

просто помітили на декількох сайтах, що шрифт awesome icons aren показує Google Chrome. На консолі відображається така помилка:

Дякую за будь-яку допомогу / пояснення!

Ця проблема доступу до шрифтів - дивовижні активи була проблемою для багатьох людей без вичерпного пояснення та вирішення проблеми.
Що таке CORS:
Спільне використання ресурсів (CORS) - це механізм, який використовує додаткові заголовки HTTP, щоб дозволити користувача агенту отримувати доступ до вибраних ресурсів з сервера в іншому джерелі (домені), ніж використовується в даний момент сайт. Агент користувача робить HTTP-запит з крос-початком, коли він запитує ресурс з іншого домену, протоколу або порту, ніж той, з якого виник поточний документ.
Проблема:
Проблема пов'язана з тим, як завантажуються дивовижні шрифти.
@font-face( font-family:"FontAwesome"; src:url("../fonts/fontawesome-webfont.eot?v=4.2.0"); src:url("../fonts/fontawesome-webfont .eot?#iefix&v=4.2.0") format("embedded-opentype"),url("../fonts/fontawesome-webfont.woff?v=4.2.0") format("woff"),url( "../fonts/fontawesome-webfont.ttf?v=4.2.0") format("truetype"),url("../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format ("svg"); font-weight:normal; font-style:normal )
Шрифти завантажуються через таблицю стилів (CSS). Ситуація, яку ми маємо тут:
Рішення:
Хоча правила CORS були створені у вашому сховищі файлів, наприклад S3, і доступ до ресурсу був наданий даному домену, коли CDN намагається завантажити шрифти, зазначені в CSS, джерело / домен, вказаний при завантаженні цих шрифтів, відноситься до CDN, але доступ до CORS не надано домену CDN.
Створіть правило CORS для домену CDN.

Я використовую CDN, який не дозволяє мені змінювати його відповідь, тому я змінив font-awesome.min.css замінивши відносний шлях на абсолютний шлях, і він спрацював.

Проблема полягає не у файлі CSS, а в тому, як він працює із файлом шрифту. Файл font-awesome.min.css має такі рядки, як
@font-face(font-family:"FontAwesome"; src:url("../fonts/fontawesome-webfont.eot?v=4.2.0"); src:url("../fonts/fontawesome-webfont .eot?#iefix&v=4.2.0") format("embedded-opentype"),url("../fonts/fontawesome-webfont.woff?v=4.2.0") format("woff"),url( "../fonts/fontawesome-webfont.ttf?v=4.2.0") format("truetype"),url("../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format ("svg"); font-weight:normal; font-style:normal)
які змушують браузер вимагати відповідний файл шрифту (eot, woff, ttf або svg) з того ж сервера, що і файл CSS. Це логічно та правильно.
Однак, коли браузер запитує цей файл шрифту з cdn.keywest.life, він читає заголовки заголовка Access-Control-Allow-Origin і не знаходить його, тому він дає це повідомлення про помилку. (Це схоже на помилку браузера для мене, тому що вона виходить з того ж сервера, що файл CSS).
Натомість, коли ви використовуєте maxcdn.bootstrapcdn.com відповідь включає заголовок Access-Control-Allow-Origin:* і браузер приймає цей файл шрифту. Якщо ваш сервер cdn увімкнув цей заголовок, він також спрацює.
Якщо у вас є сервер Apache, див. Ця відповідь: Font-awesome не відображається належним чином у Firefox / як продавати через CDN?

На цьому сайті я в даний час кодую Im, використовуючи webfonts, які зберігаються на моєму сервері. Кожен браузер відображає їх просто добре, але не хром. Натомість Chrome використовує Times New Roman. Після перевірки інструментів розробника на chrome я виявив, що вони запитують ARE шрифти з сервера і успішно видаляються. Чомусь Chrome їх не використовує. Я помітив, що якщо я встановлю шрифти на своєму комп'ютері (використовуючи Windows, BTW), раптом почне працювати і з хром.

Ось моє прочитання шрифту:

@font-face ( font-family: "BNLunch"; src: url("BN_Lunch.eot"); src: url("BN_Lunch.eot?#iefix") format("embedded-opentype"), url("BN_Lunch .woff") format("woff"), url("BN_Lunch.ttf") format("truetype"), url("BN_Lunch.svg#BNLunchregular") format("svg"); font-weight: normal; font -style: normal;

Які ідеї?

редагувати: Я забув згадати, що цей конкретний CSS працює з іншими шрифтами. Тільки цей конкретний шрифт та BNMadregot дають мені проблеми. Можливо, це тому, що англійські літери цього шрифту є порожніми?

2 відповіді

Шрифт зламаний (як сказав вам FontSquirrel). Не використовуйте його. Я завантажив BN Lunch із сайту, який ви згадали, і обробив його за допомогою font-face-generator.com, а тестова.html-сторінка, яку вона згенерувала, не відображає символи в цьому шрифті (і так, я теж пробував прості цифри і літери на івриті) Chrome абоу Firefox, тільки в IE (перевірено на Win 7). Інструменти Chrome dev показують, що Chrome отримує файли шрифтів і не сигналізує про помилки, тому, мабуть, порушуються внутрішні таблиці шрифту (наприклад, неправильна інформація про покриття персонажа). Сайт, який його розповсюджує, виглядає підозріло, як один із багатьох незаконних сайтів розповсюдження шрифтів; наприклад, автори або авторські права на шрифти не згадуються.

Отже, отримайте ще один шрифт.

У мене є схожий код CSS, який відмінно працює у кожному браузері, навіть у Chrome.

@font-face ( font-family: "standard 07_58"; src: url("../fonts/standard_07_58/stan0758.eot?") format("eot"), url("../fonts/standard_07_58/stan0758 .woff") format("woff"), url("../fonts/standard_07_58/stan0758.ttf") format("truetype"), url("../fonts/standard_07_58/stan0758.svg#Standard0758") format("svg"); font-weight: normal; font-style: normal; )

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