Вопрос по – Превосходный шрифт, отображаемый в Firefox неправильно

12

Я пытаюсь использовать значок шрифта в виджете, который установлен на веб-сайте клиента. Прекрасные значки шрифта отображаются правильно в Safari и Chrome, но не в Firefox. Тем не менее, он по-прежнему отображается правильно в Firefox при предварительном просмотре на нашем сайте. Это как-то связано с тем, как Firefox отображает сторонние шрифты в разных доменах?

Любые идеи очень приветствуются. Благодарю.

Примечание: это было проверено с использованием Firefox V9 и выше.

Ваш Ответ

8   ответов
-2
@font-face{font-family:'FontAwesome-webfont';

1

исправить эту проблему, Они устанавливают правильные заголовки CORS, и встраивание этой строки в ваш сайт должно работать:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
0

вы проталкиваете шрифты через код браузера, и файлы шрифтов не загружаются обычным способом, требующим междоменных разрешений.Это также проблема DISA STIG отключить загружаемые шрифты, но, вероятно, не ваша проблема здесь.Решение можно увидеть в этом посте а также скопировал сюда:

Вам просто нужноBase64 шрифт и включить его в файл CSS. Обязательно удалите ваш вызов загружаемому файлу WOFF, как только вы включите вызов в новый файл FontAwesomeB64.css.

использованиеhttps://www.base64encode.org/ кодировать файл шрифта WOFF Font-Awesome.

Отредактируйте полученный файл и добавьте эти строки. Когда вы дойдете до строки src: url, убедитесь, что запустили ее прямо в полученную вами информацию base64 (не используйте знаки больше и меньше, которые я показываю здесь). В конце этой информации base64 добавьте одинарную кавычку. , скобки, точка с запятой и фигурная скобка до конца:

@font-face { 
font-weight: 400;
font-style: normal;
font-family: 'FontAwesome';
src:url(data:application/x-font-woff;base64,<insert base64 code here>);}

Теперь у вас есть CSS-файл base64 со шрифтом Font-Awesome, который обходит все настройки запрета загрузки шрифтов в браузерах.

Я обнаружил, что это работает со всеми шрифтами, немного тяжелее при загрузке, но заслуживает гарантии функциональности.

4

только если сервер, на котором установлен шрифт, отправляет правильные заголовки CORS. И это происходит потому, что в спецификации очень четко сказано,http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded acmeyer9
<?php header('Access-Control-Allow-Origin: *'); ?>Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
1

вы должны включить CORS на корзине. Увидетьмой ответ на этот другой вопрос для деталей

0

Firefox запрещает чтение удаленного ресурса из-за той же политики происхождения для ниже CDN:

https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css

Я немного покопался, чтобы исправить проблему с CORS, вместо этого я заменил вышеупомянутый CDN на нижеприведенный, и иконки хорошо отрисовывались

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">

0

Use direct link for including css files , also make sure you don't get a cross-domain error in the debugging console .

For example when you access your website from :

http://www.domain.tld убедитесь, что вы связываете CSS-файл по тому же пути, включаяwww

вот так :http://www.domain.tld/css/style.css

и когда вы получаете доступ изhttp:// & GT; связывать файлы CSS также с того же пути безwww.

http://domain.tld/css/style.css

Я получил эту проблему некоторое время назад, и она была исправлена путем изменения путей CSS, чтобы запросить файлы CSS из "тот же" quot; веб-адрес / путь.

example: you can view font awesome icons in this path

http://webake.ro/

But not in this one :

http://www.webake.ro/

потому что шрифт был связан изнутриHttp: //domain.tld путь без добавления www. в

link href=

Шрифт из источника & apos;http://webake.ro& APOS; была заблокирована загрузка Cr, политика совместного использования ресурсов oss-Origin: Нет & lt; Access-Control-Allow-Origin & apos; заголовок присутствует на запрашиваемом ресурсе. Происхождениеhttp://www.webake.ro& APOS; поэтому не разрешен доступ.

0

возможно, связанное с политиками безопасности firefox. У меня были те же проблемы с конфигурацией проекта, например:

/site/html <--- where all the .html files go /site/resources/... <--- where all the css, font, img, js stuff goes

Теперь я включил файл font-awesome.min.css в html-файл, расположенный в каталоге / site / html, и экспериментировал с вашей проблемой. Но когда вы загружаете пакет Font Awesome, он поставляется с демонстрационными html-файлами, которые действительно работают в Firefox. Что за хитрость ?!

Их структура проекта имеет «ресурсы» папка (они называют ее «активами»), вложенная в «html»; папка. Это, кажется, успокаивает политику безопасности firefox. Наконец, мой ответ: получите конфигурацию, подобную следующей

/site/html <--- where all the .html files go /site/html/resources/... <--- where all the css, font, img, js stuff goes

это сработало для меня.

Похожие вопросы