web-dev-qa-db-ja.com

クロスドメインのフォントフェースの問題

コメントする前に、このすべてをお読みください。

私は現在、アマゾンウェブサービス（AWS）でホストされている大規模なウェブサイトで作業しています。これにより、Webサイトに大きなトラフィック負荷がかかる可能性がある状況でスケーラビリティ機能を使用できます。

当初は、HTML/PHP/Javaなどを組み合わせたWebサイトのコードを分離することから始め、別のサーバーに静的アセットを配置していました。この設定で最初にfont-faceを使用しようとしたとき、FirefoxとIEはフォントを読み込まないことがわかり、すぐにクロスドメインの問題であることがわかりました。さまざまな解決策があります。これには、フォントファイルへのアクセスを許可するためのヘッダーの変更が含まれます。ただし、使用しているストレージシステムでは、このタイプのヘッダーの変更は許可されていません。

すべてのブラウザでフォントを機能させることができるかどうかを確認するために、フォントと、フォントをWebサイトと同じドメインに呼び出すCSSファイルを移動しました。ただし、FirefoxやIEにはまだ読み込まれていないようです。コードをコピーしてドキュメント内でローカルに実行すると、すべてのブラウザーですべてが正常に表示されます（したがって、ファイルが破損することはありません）。 FireBugを介してファイルがロードされているのを見ると、Firefoxは間違いなくファイルを見つけています。

すべての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ファイルはフォントと同じディレクトリにあります。

また、フォントと同じフォルダーにある.htaccessファイルにMIMEタイプを設定しています。

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>

何かアイデアがあれば提案してください。
私は数日間ウェブを検索してきましたが、すべての解決策が失敗しました。

htmlcssfontscross-domainfont-face
17
diggersworld

現在、AWSからのウェブフォントの提供はFirefoxでは機能しない可能性が高くIE 9+ AWSはAccess-Control-Origin-Headerをサポートしていないため。これを参照 post = AWSフォーラムで。多くの人にとって問題のようです。

2012年7月17日更新：

AWSの代わりに、Googleのクラウドサービスはクロスオリジンファイルサービスをサポートしています。 Webフォントを提供するためにバケットを設定したところ、機能しているようです。詳細については、このブログ 投稿 および ドキュメント を参照してください。

12
Casey

これを試してください：

サーバーに以下を追加する必要があります。

Access-Control-Allow-Origin

フォントファイルのヘッダーに、たとえばApacheを使用している場合は、これを.htaccessに追加できます。

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

私の問題はこの方法で解決しました。

3
Parasolx

これは、CloudfrontなしでS3を使用して、次の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/

3
Tom

新しいホスティング環境でMIMEタイプのサポートを追加する必要があるかもしれません。

を見てみましょう：

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

2
joshcomley