0

IEは非常に奇妙です。MIMEタイプを確認し、次の.htaccessファイルを追加しました

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

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

そして、IE9開発者ツールはそれが実施されていることに気付いたようですが、やはり変更はありません。ウェブサイトは現在オフラインです（ハードドライブで表示されているだけです）-別のサーバーにアップロードされた場合はまだ機能しません-headタグ内からすべてのJavascriptとスタイルシートがリンクされています。すべて良い。

フォントがまったく正しくインポートされていません。

開発者コンソール内に次のようなエラーメッセージが表示されます。

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
vitesse-bold.eot?#iefix

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
vitesse-bold.woff

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
vitesse-bold.ttf

私はこれについてかなりの調査を行い、ドキュメントタイプがこれを妨げる可能性があることを理解しています。私は、cssがで始まるUTF-8を使用して@charset "UTF-8";おり、HTMLファイルも次のように始まります。

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">

フォント変換と関係があると思っていたのですが、そうだとすれば、ホストサーバーから直接ウェブサイトを見ていると、IEではそもそもフォントが機能しません。

これを解決する方法について何かアイデアはありますか？

また、EOTファイルのみを使用するIE 7および8では、別のエラーが発生します。

CSS3111: @font-face encountered unknown error.
vitesse-bold.eot

フォントディレクトリ.htaccess：

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

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

メインウェブサイト.htaccess：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

CSSフォントのインポート：

@font-face {
    font-family:'Vitesse-Bold';
    src:url('../includes/fonts/vitesse-bold.eot');
    src:url('../includes/fonts/vitesse-bold.eot?#iefix') format('embedded-opentype'),
            url('../includes/fonts/vitesse-bold.woff') format('woff'),
            url('../includes/fonts/vitesse-bold.ttf') format('truetype'),
            url('../includes/fonts/vitesse-bold.svg#vitesse-bold') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'Flama-Bold';
    src:url('../includes/fonts/flama-bold.eot');
    src:url('../includes/fonts/flama-bold.eot?#iefix') format('embedded-opentype'),
            url('../includes/fonts/flama-bold.woff') format('woff'),
            url('../includes/fonts/flama-bold.ttf') format('truetype'),
            url('../includes/fonts/flama-bold.svg#flama-bold') format('svg');
    font-weight:normal;
    font-style:normal;
}

スクリーンショット：

http://www.titaniumwebdesigns.com/forums/screenshot-a.jpg フォントのインポートsrc:url('../includes/fonts/font.eot');

http://www.titaniumwebdesigns.com/forums/screenshot-b.jpg フォントのインポートsrc:url('http://sub-domain.domain.com/includes/fonts/font.eot');

http://www.titaniumwebdesigns.com/forums/screenshot-c.jpg フォントのインポートsrc:url('http://www.sub-domain.domain.com/includes/fonts/font.eot');

http://www.IEが両方で2つのフォントを作成して何が起こっていたのかわからないが、http://現在は機能しなくなっているようだ。

4

1 に答える 1

2

実際の問題

@ font-faceコードを修正することで、IE9でフォントを機能させ、問題をEOTファイルに絞り込みました。

ここでの問題は、フォントファイル自体に設定されているフォント名とファミリ名でした。何らかの理由で、IE6-8には、これら2つのプロパティが異なるという問題があります（ただし、私のサイトで使用しているカスタムフォントはプロパティごとに異なる名前を持っており、すべてで問題なく機能するため、常にではありません）。

私は彼から元のOTFファイルを入手し、FontForgeを使用して「fontname」、「family name」、「name for humans」をすべて同じに設定し、フォントをTTFとして保存し、オンラインでEOT形式に変換しました。

今はうまくいきます。IEで$＃！7を機能させるために行うこと。

注：以前、ファイルをEOT（ファイルプロパティの編集なし）に変換しようとしましたが、成功しませんでした。

元の回答

フォントファイルをどのように参照していますか？それらに比較的リンクしていないか、別のドメイン/ホスト名にあるように聞こえます。

それらに絶対にリンクしている場合、たとえば：http://www.domain.com/fonts/myfont.eotを介してサイトにアクセスするhttp://domain.comと、CORSの問題が発生します。私はこの問題を抱えていました。それはIEの問題だと思いました。私は、IEwwwを使用せずに、1つのブラウザーでWebサイトを表示しているだけでした。

フォントファイルが別のホスト名またはドメインにある場合は、CORSを有効にする必要があります。詳細は次のとおりです。

http://enable-cors.org/

http://www.w3.org/TR/cors/

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

@ font-faceに使用するコード：

@font-face {
font-family: "Vitesse-Bold";
src: url('../includes/fonts/vitesse-bold.eot');
src: local('(*%$@#@'),
    url('../includes/fonts/vitesse-bold.woff') format('woff'),
    url('../includes/fonts/vitesse-bold.ttf') format('truetype'),
    url('../includes/fonts/vitesse-bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Flama-Bold";
src:url('../includes/fonts/flama-bold.eot');
src: local('(*%$@#@'),
    url('../includes/fonts/flama-bold.woff') format('woff'),
    url('../includes/fonts/flama-bold.ttf') format('truetype'),
    url('../includes/fonts/flama-bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}

次のように使用します：

font-family: "Vitesse-Bold", Verdana, sans-serif;

注： の使用はsrc: local('(*%$@#@')、<〜4.0のデフォルトのAndroidブラウザーではサポートされておらず、カスタムフォントがまったく機能しなくなります。

于 2012-09-11T14:15:37.110 に答える