Междоменные проблемы со шрифтом - PullRequest
Новая
       13

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

16 голосов
/ 23 ноября 2011

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

В настоящее время я работаю над большим сайтом, который размещен на Amazon Web Services (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>

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

Ответы [ 4 ]

11 голосов
/ 13 марта 2012

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

Обновление от 17.07.12:

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

3 голосов
/ 12 июня 2014

Это возможно при использовании 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/

2 голосов
/ 23 ноября 2011

Возможно, вам потребуется добавить поддержку типов MIME в новой среде хостинга.

Посмотрите:

http://www.jbarker.com/blog/2011/web-fonts-mime-types

1 голос
/ 25 июля 2013

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

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

Access-Control-Allow-Origin

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

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

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

...