Главная > Hi-Tech > Как решить проблему нечеткого размытого шрифта в новых версиях Google Chrome. что делать, если в Google Chrome Canary появились битые шрифты

Как решить проблему нечеткого размытого шрифта в новых версиях Google Chrome. что делать, если в Google Chrome Canary появились битые шрифты



шрифт в гугл хром изменился (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 дают мне проблемы. Может быть, это потому, что английские буквы этого шрифта пустые?

0

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, поэтому попробуйте следовать этому шаблону и посмотреть, что произойдет.

Периодически после обновления браузера Хром у пользователей возникали проблемы со шрифтом: он становился мыльным, нечетким, размытым и пр. До 51-ой версии включительно проблема эта легко решалась, а вот обновление до 52-ой версии принесло всем пользователям браузера большой сюрприз…


В версии 52.0.2743.82, которая вышла 21.07.2016 разработчики решили убрать возможность индивидуальной настройки внешнего вида шрифта посредством экспериментального параметра «Отключить DirectWrite Windows», который как раз помогал в случае наличия размытости и нечеткости. Теперь параметра DirectWrite нет .

Чем объяснить такой шаг – абсолютно непонятно, но на форумах, в том числе и официальном форуме Google, огромное количество гневных отзывов с просьбами и даже требованиями вернуть всё назад.

На момент написания статьи, 6 августа, мы имеем уже следующую версию браузера Chrome (52.0.2743.116), но ничего так и не изменилось. Видимо разработчикам виднее, какой шрифт удобней пользователям и не следует давать им свободу выбора…

Какие проблемы могут наблюдаться в браузере

Проблема со шрифтами может проявляться по-разному. У кого-то шрифт просто размытый и нечеткий. У кого-то жирный шрифт имеет тень либо вовсе не отличается от обычного:

У кого-то проблемы с отображением шрифта на сайте Вконтакте: он мутный, абсолютно нечитабельный, режет и напрягает глаза. Пример:

У кого-то вместо черного все буквы серого цвета, едва различимые на белом фоне:

А у некоторых пользователей и вовсе полная ерунда и ужас: шрифты поломаны и выглядят криво:

Как же решить проблему со шрифтами в Google Chrome и вернуть их в читабельное состояние?


Для начала проверьте текущую версию своего браузера. Введите в адресную строку chrome://help/ и нажмите ввод. Откроется страничка «о программе».

Если версия Хрома 51 и ниже, то Вам , а если 52 и выше, то слушайте внимательно… В настоящее время нет решения того, как средствами самого Хрома сделать шрифты четче – разработчики лишили пользователей влиять на это, убрав параметр DirectWrite из экспериментальных настроек!

Есть только два способа решить данную проблему:

  • Во-первых, перейти на другой браузер, например, Firefox. У последних версий Opera кстати есть такая же проблема со шрифтами, что и у Chrome, так как основаны они на одном и том же движке.
  • Во-вторых, откатить Хром на предыдущую версию, точнее на ту, где проблема еще отсутствовала (51.0.2704.106), и настроить параметр DirectWrite. Но тут есть одна загвоздка…

Разработчики гугл и тут всех перехитрили:) Сделать откат через настройки самого браузера невозможно – такая опция отсутствует. Даже если Вы удалите текущую версию программы, то на официальном сайте Вы не найдете установочных файлов предыдущих версий.

Как сделать откат на предыдущую версию Google Chrome

Остается только такая схема:


Кто хочет может искать самостоятельно, а мы уже нашли, скачали, и теперь делимся с Вами ссылочкой на Яндекс.Диске: Google Chrome 51.0.2704.106 (есть версия как для 64bit, так и для 32bit систем).


Теперь несколько важных замечаний:
  1. Перед удалением Хрома синхронизируйте все нужные данные с аккаунтом Google дабы они не пропали! Для этого в адресном окне браузера наберите chrome://settings/syncSetup и нажмите ввод. В открывшемся окошке поставьте галочки напротив всех нужных пунктов, а лучше просто выберите опцию «Синхронизировать всё», как на скриншоте ниже – так будет надежней:)

Подождите некоторое время для завершения синхронизации, особенно если ранее эта опция была у Вас отключена.

  1. После установки версии 51.0.2704.106 верните прежние настройки Chrome путем синхронизации и обязательно отключите автоматическое обновление до свежей версии, а то браузер опять обновится и всё проделанное пойдет насмарку!

Как отключить обновление Хрома

Чтобы браузер не мог обновляться, делаем одну хитрость. Переходим в папку c:\Program Files\Google\Update\ или c:\Program Files (x86)\Google\Update\, если у Вас 64-битная версия ОС, удаляем файлик GoogleUpdate.exe .

Всё, никаких проблем:) В интернете рекомендуют редактировать записи реестра, изменять групповые политики Windows, добавлять административные шаблоны и пр. и пр. Как всегда – большинство подобных инструкций написано теми, кто сам ничего этого не делал, а просто занимаются переписыванием друг у друга. Ничего этого не надо. Просто удаляете файлик GoogleUpdate.exe и Хром больше не сможет обновиться.

Когда Вы спустя какое-то время решите установить свежую версию Google Chrome (если вдруг такое случится), просто вручную с официального сайта скачаете установочный файл и запустите его. Никаких проблем!

P.S. (Update 06/2018)

Многим пользователям помогло изменение в экспериментальных настройках параметра font-cache-scaling. Для этого в адресную строку скопируйте и вставьте chrome://flags/#enable-font-cache-scaling , после чего выберите состояние «Disabled» как показано на скриншоте:

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

По факту тестовой установки браузера Google Chrome Canary на новый Windows-ПК были обнаружены битые шрифты, притом как в интерфейса самого браузера, так и на сайтах, которые в нём открывались.

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

Но пришлось…

Как выглядела упомянутая проблемка внешне, вы можете посмотреть на скрине ниже. Верхнюю его часть мы сделали сразу после установки , а нижнюю — после устранения бага. И обратите внимание, это страничка меню настроек (т.н. chrome://flags page ).

Разумеется, мы тоже предположили, что одной и причин данного явления может быть то, Canary является самой новой версией браузера, и возможно, в ней еще доделывается-переделывается что-то такое, чего нет еще даже в Стабильной версии Chrome.

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

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

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

После этого битые шрифты «исправились» сами. Но стоит также отметить, что отключение функции аппаратного ускорения в данной конкретной ситуации следует воспринимать, как меньшее из зол, поскольку это может негативно сказаться на производительности браузера в ряде случаев (точнее, при выполнении некоторых задач). Впрочем, включить функцию можно в любой момент, повторив приведенный алгоритм действий.


Рекомендуем также