Я пытаюсь использовать шрифт awesome icon в виджет, который установлен на веб-сайте клиентов. Шрифт awesome icons отображается правильно в Safari и Chrome, но не работает в Firefox. Тем не менее, он по-прежнему отображается правильно в Firefox при предварительном просмотре его на нашем сайте. Связано ли это с тем, как Firefox отображает сторонние шрифты в доменах?
Любые идеи будут высоко оценены. Спасибо.
Примечание. Это было протестировано с использованием Firefox V9 и выше.
Firefox разрешает междоменное связывание шрифтов, если сервер, на котором установлен шрифт, отправляет правильные заголовки CORS. И он делает это, потому что спецификация очень четко говорит, чтобы сделать это, http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction
Если вы размещаете свой шрифт на S3, вам нужно включить CORS на ведро. Подробнее см. мой ответ на этот другой вопрос.
Определено MaxCDN и исправить эту проблему. Они устанавливают правильные заголовки CORS и встраивают эту строку на ваш сайт, чтобы они работали:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Я замечаю странное поведение, возможно, связанное с политиками безопасности firefox. У меня были такие же проблемы с конфигурацией проекта:
теперь я включил шрифт-awesome.min.css в html файл, расположенный в каталоге /site/html, и я экспериментировал с вашей проблемой. Но когда вы загружаете пакет Font Awesome, он поставляется с демонстрационными файлами html, которые фактически работают в firefox. Какой трюк?!
В их структуре проекта есть папка "resources" (они называются "активы" ), вложенные в папку "html". Кажется, это успокаивает политику безопасности firefox. Наконец, мой ответ: получить конфигурацию, подобную следующей
это сработало для меня.
Firefox блокирует запрос Cross-Origin.
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">
Используйте прямую ссылку для включения файлов css, также убедитесь, что вы не получаете междоменной ошибки в консоли отладки.
http://www.domain.tld убедитесь, что вы связали файл css с одним и тем же путем, включая www
так: http://www.domain.tld/css/style.css
и при доступе из http:// > ссылок css файлов также с того же самого пути без www.
http://domain.tld/css/style.css
Я получил эту проблему некоторое время назад, и она была исправлена путем изменения путей css для запроса файлов css с "того же" веб-адреса/пути.
Пример: вы можете просматривать шрифты удивительные значки в этом пути
Но не в этом:
потому что шрифт был связан из http://domain.tld, не добавляя www. в
link href=
Шрифт от источника 'http://webake.ro' был заблокирован от загрузки политикой совместного использования ресурсов Cross-Origin: Нет 'Access-Control-Allow Заголовок -Origin 'присутствует на запрошенном ресурсе. Происхождение http://www.webake.ro ', следовательно, не допускается.
Превратите свои шрифты в base64 и включите их через CSS. Таким образом вы нажимаете шрифты через код браузера, а файлы шрифтов не загружаются обычным способом, требующим разрешения на перекрестный домен. Это также проблема 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, который обходит все настройки отказа шрифтов в браузерах.
Я обнаружил, что это работает со всеми шрифтами, немного тяжелее при загрузке, но стоит гарантию функциональности.
@font-face{font-family:'FontAwesome-webfont';
Поверьте мне, это действительно работает.