Потрясающе не отображается на Firefox / как продавать через CDN?

Question

Я не могу получить шрифт, чтобы правильно отображать в 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 потерпел неудачу с fontawesome, но это не решило проблему.

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

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

Ниже приведен код из моего файла 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;
}

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

Answer 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

Answer 2

Обычно я обнаружил, что добавление локальной декларации исправляет это. например:

@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 или не иметь возможности делать такие переопределения.

Answer 3

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

Answer 4

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

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

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

Это заставит Font-Awesome работать с CDS в Firefox и Internet Explorer (IE).

Answer 5

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

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

Answer 6

Решение - использовать другой cdn для fontawesome.

https://www.cdnpkg.com/font-awesome/5.11.0