Битые шрифты в браузере Chrome Canary: как устранить баг. Что такое CORS

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

шрифт в гугл хром изменился (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?

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

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

Но пришлось…

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

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

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

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

что делать, если в Google Chrome Canary появились битые шрифты:

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

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