Проблемы с междоменным шрифтом

прочитайте все это, прежде чем комментировать.

В настоящее время я работаю на большом веб-сайте, который размещен на веб-сервисах Amazon (AWS). Это позволяет нам использовать функции масштабируемости в ситуациях, когда веб-сайт может иметь большую нагрузку на трафик.

Первоначально мы начали с того, что разделили код веб-сайта на сочетание HTML/PHP/Java и т.д. и имели статические активы на отдельном сервере. Когда я впервые попытался использовать font-face в этой настройке, я обнаружил, что Firefox и IE не загружают шрифт и быстро обнаруживают, что это проблема междоменного доступа. Для этого есть множество решений, которые включают в себя изменение заголовков для доступа к файлам шрифтов. Однако используемая нами система хранения не допускает модификацию заголовка этого типа.

В попытке увидеть, могу ли я просто заставить шрифты работать во всех браузерах, я переместил их и файл CSS, который вызывает их в том же домене, что и веб-сайт. Однако они все еще не загружаются в Firefox или IE. Если я скопирую код и запустил его локально в своих документах, все кажется прекрасным во всех браузерах (поэтому файлы не могут быть повреждены). Firefox определенно находит файлы, поскольку я вижу, что они загружаются через FireBug.

Я проверил все URL-адреса, чтобы убедиться, что они верны и решить, где они должны.

Здесь шрифт CSS, который я использую с помощью смайлика:

@font-face {
    font-family : "AllerRegular";
    src : url('aller_rg-webfont.eot');
    src : local('☺'),
          url('aller_rg-webfont.woff') format('woff'), 
          url('aller_rg-webfont.ttf') format('truetype'), 
          url('aller_rg-webfont.svg#webfontooYDBZYS') format('svg');
    font-weight : normal;
    font-style : normal;
}

Файл CSS находится в том же каталоге, что и шрифты.

У меня также есть типы MIME, установленные в файле .htaccess, который находится в той же папке, что и шрифты.

AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz
<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
        <IfModule mod_headers.c>
                Header set Access-Control-Allow-Origin "*"
        </IfModule>
</FilesMatch>

Если у вас есть какие-либо идеи, пожалуйста, предложите.
Я искал в Интернете несколько дней, но все решения не помогли мне.

Ответы

Ответ 1

В настоящее время обслуживание веб-сайтов из AWS, вероятно, не будет работать в Firefox и IE 9+, потому что AWS не поддерживает Access-Control-Origin-Header. См. Этот post на форумах AWS. Кажется, проблема для многих людей.

Обновление 7/17/12:

В качестве альтернативы AWS облачные сервисы Google поддерживают работу с файлами с кросс-началом. Я просто создал ведро для обслуживания веб-сайтов и, похоже, работает. Дополнительную информацию см. В этом блоге post и ./p >

Ответ 2

Это возможно, используя S3 без Cloudfront, добавив следующую конфигурацию CORS.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Content-*</AllowedHeader>
    <AllowedHeader>Host</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

http://html5hacks.com/blog/2012/11/18/configure-amazon-s3-for-cross-origin-resourse-sharing-to-host-a-web-font/

http://blog.blenderbox.com/2012/10/12/serving-font-face-fonts-to-firefox-from-an-s3-bucket/

Ответ 4

Попробуйте сделать это:

На вашем сервере вам нужно будет добавить:

Access-Control-Allow-Origin

В заголовок файлов шрифтов, например, если вы используете Apache, вы можете добавить это в .htaccess:

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

Моя проблема решена с помощью этого метода.