58

Webサイトで使用するフォントリポジトリのタイプを作成しようとしています。これにより、他の設定を行わなくても、css内のリポジトリ内の任意のフォントを呼び出すことができます。これを行うために、各フォントのさまざまなファイルタイプを含むリポジトリ内の各フォントのフォルダーを配置するサブドメインを作成しました。また、サブドメインのルートにfont-face.cssというcssファイルを配置し、@font-face各フォントの宣言を入力しました。フォントは絶対リンクでリンクされているため、どこからでも使用できます。

私の問題は、それらが配置されているサブドメインのフォントしか使用できないようですが、他のサイトではフォントが表示されないことです。firebugを使用して、font-face.cssファイルが正常にリンクおよびロードされていることを確認しました。では、なぜフォントが正しくロードされないのですか？フォントファイルなどに保護はありますか？私はこれを許可されるべきすべてのフォントを使用しているので、なぜこれが発生しているのかわかりません。アパッチの問題かもしれませんが、リンクするとフォントを問題なくダウンロードできます。

ああ、そして明確にするために、私はこれを設定することによって著作権を侵害していません。私が使用しているすべてのフォントは、この種のものを許可するためにライセンスされています。ただし、このフォントのリポジトリにアクセスできるのは自分だけである方法を設定したいのですが、それは別のプロジェクトです。

4

4 に答える 4

94

これは、Firefox（Firebugについての言及から）がクロスドメイン、さらにはサブドメイン、Webフォントの埋め込みは悪い考えであると考えているためです。

.htaccessフォントが提供されているサブドメインのトップレベルファイルにこれを追加することで、サブドメインからフォントをロードするように説得できます（ HTML5ボイラープレートの同じファイルのコードを適応させるように更新されています）。

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

これに応えて：

ただし、このフォントのリポジトリにアクセスできるのは自分だけである方法を設定したいのですが、それは別のプロジェクトです。

のW3C仕様でAccess-Control-Allow-Origin"*"は、ワイルドカードまたは特定のドメイン以外の何も述べていません。これまでのところ、ヘッダーの検証を示唆するこのSOの答えOriginを見つけましたが、これはFirefoxのみのヘッダーだと思います。他のブラウザについてはよくわかりません（.htaccessクロスドメインWebフォントが機能するために上記のトリックさえ必要ありません）。

于 2010-05-23T17:26:34.557 に答える
8

Firefoxでこれを修正する別の方法は、base64エンコーディングを使用してフォントをcssファイルに直接埋め込むことです。上記の構成の一部にアクセスできない場合は特に気の利いたものです。

fontsquirrel.comで必要なコードを生成できます。font -faceキットジェネレーターでエキスパートモードを選択し、下にスクロールして、CSSオプションでBase64エンコードを選択します。ダウンロードしたFont-Kitはプラグアンドプレイの準備ができています。

これには、必要なhttpリクエストが1つ少なくなるため、ページの読み込み時間が短縮されるという周辺的な利点もあります。

于 2011-07-26T16:01:01.497 に答える
4

すべてのドメインからのリソースを許可せず、サイトのサブドメインからのみ許可する場合は、次のようにする必要があります。

# Allow font, js and css to be loaded from subdomain
SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=$0
<IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
        Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN
    </FilesMatch>
</IfModule>

ソース：http ：//www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html

于 2015-01-03T06:19:30.007 に答える
1

「エキスパート」モードでhttp://www.fontsquirrel.com/fontface/generatorを使用し、オプションとしてbase64を選択すると、スタイルシートで使用するために必要なbase64エンコードデータを含むstylesheet.cssが返されました。IE8を除いて、テストしたすべてのブラウザで動作するようです。

この問題は、フォントをホストする必要があるサルサ請願などのサードパーティツールにテーマを適用するときに最も発生します。

みんな助けてくれてありがとう！

于 2012-04-20T21:16:53.610 に答える