Шрифт-awesome не отображается должным образом в Firefox/как продавать через CDN?

Я не могу заставить шрифт-awesome правильно отображаться в firefox, даже в localhost. Я получаю следующую ошибку перекрестного домена:

Timestamp: 08/08/2012 02:49:37 PM
Error: downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal     `src index:2): bad URI or cross-site access not allowed
source: http://localhost:3000/djpsite/baseadmin/font/fontawesome-webfont.ttf
Source File: http://localhost:3000/djpsite/baseadmin/css/font-awesome.css
Line: 0
Source Code:
@font-face {   font-family: "FontAwesome";   font-style: normal;   font-weight: normal;   src: url("../font/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../font/fontawesome-webfont.woff") format("woff"), url("../font/fontawesome-webfont.ttf") format("truetype"), url("../font/fontawesome-webfont.svg#FontAwesome") format("svg"); }

Я использовал двойные кавычки, как предложил этот пост: firefox @font-face fail with fontawesome, но это не решило проблему.

Все работает отлично в Chrome; любые предложения?

Помимо исправления проблемы в Chrome, как я должен распространять шрифт, отличный от CDN, с учетом этого ограничения: http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction?

Ниже приведен код из моего файла CSS:

@font-face {
    font-family: 'FontAwesome';
    src: url("../font/fontawesome-webfont.eot");
    src: url("../font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'),
    url("../font/fontawesome-webfont.woff") format('woff'),
    url("../font/fontawesome-webfont.ttf") format('truetype'),
    url("../font/fontawesome-webfont.svg#FontAwesome") format('svg');
    font-weight: normal;
    font-style: normal;
}

Спасибо за вашу помощь!

Ответ 1

Это решило проблему с перекрестным доменом Firefox для меня (что заставляет шрифт не загружаться в Firefox). Просто добавьте следующее в .htaccess или непосредственно в конфигурацию apache:

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Существует веб-страница с инструкциями о том, как настроить CORS на разных серверах: https://enable-cors.org/server.html

Ответ 2

Я обычно обнаружил, что добавление локального объявления исправляет это, как this. например:.

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
}

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

Ответ 3

Если вы создаете приложение rails (или какое-то другое приложение на стойке), посмотрите https://github.com/cyu/rack-cors Супер легко встать и работает. Вы можете отправить его в application.rb или один из файлов среды.

Ответ 4

Если вы используете AWS Cloudfront, как в моем случае, вам нужно добавить политику CORS. S3 намеренно не позволит вам устанавливать заголовки во время загрузки, потому что вам нужно использовать политику вместо этого.

Эта конфигурация политики должна сделать трюк для вас:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

Это обеспечит Font-Awesome работу с CDS в Firefox и Internet Explorer (IE).

Ответ 5

У меня была такая же проблема на magento 2.0. Он работал нормально на https, но не на http. Чтобы позволить шрифт-awesome значки загружаться по http. Я добавил следующее в .htaccess, расположенном в корневом каталоге установки magento.

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>