web-dev-qa-db-ja.com

Internet Explorer @ font-faceが失敗する

Internet Explorerにきれいなフォントをレンダリングさせようとしています。動いていない。 Firefoxで正常に機能し、ApacheアクセスログでIEがフォントをプルしたことがわかります。したがって、フォントフェイスCSSタグを解析しているだけで、レンダリングはしていません。

フォントの変換に使用したサイトは http://www.kirsle.net/wizards/ttf2eot.cgi です。 MicrosoftでそのWEFTツールを試しましたが、正しく機能しませんでした。それをインストールして開いた後、「最初に実行して、これを実行してください...」と言われた後、継続的にハングしました。

これが私のCSSです。

@font-face
{
   font-family: 'HelveticaLTCN';
   src: url('HelveticaNeueLTCom-LtCn_0.eot');
   src: local('HelveticaNeuel TCom LtCn'), url('HelveticaNeueLTCom-LtCn_0.ttf') format('TrueType');
}

なぜIEがフォントをレンダリングしないのかというアイデアはありますか？

編集：言及する必要があります、私はでフォントを呼び出しています：

p .mytext
{
   font-family: HelveticaLTCN;
}
cssinternet-explorerfont-face
31
panas

あなたがタオルを投げたり、まだこれに苦労している場合は、私は強くfont squirrel をお勧めします。他のオンライン.eotジェネレーターよりもはるかに優れたWEFTを置き換えます。大きなボーナスとして、必要なすべてのクロスブラウザ形式を1つのZipファイルとCSS + HTMLサンプルページで提供します。 @fontface nirvanaに最も近いものです。

49
atsjr

.eotフォントは最後の「src」でなければなりません。そうでない場合、IEは設定を書き換え、フォントをクラッシュさせます。

@font-face {
    font-family: "Aller Bold";
    src: url(fonts/Aller_Bd.ttf) format("truetype");
    src: url(fonts/Aller_Bd.eot);
}
8
Dan Palmieri

私はここで多くの人々が遭遇した同じ問題を抱えていました。問題は、IEはfont-familyの値の文字制限が短いことです。font-familyに短い名前を付けて、最終的にcssというフォントリスを使用して機能しました。吐き出す。

奇妙なもの！

3
Adam Bales

Internet Explorerは、そこにある他の@ font-faceの定義に少し不安を感じます。私は以前、これが驚くべき助けであることを発見しました- http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

要するに、彼らは次の方法が最善の方法であることを推奨しています。唯一の変更点は、フォントURLの最後に疑問符を追加することです。変だ、違う？

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

EOTファイル用に別の@ font-faceタグを他のものとは別に指定する方法など、他にも多くの選択肢がリストされています。

3
Overflew

これは私のために働いた：

@font-face {
    font-family : 'din-pro';
    src         : url('../fonts/din/DINPro-Medium.woff') format('woff');
    src         : url('../fonts/din/DINPro-Medium.otf') format('otf');
    src         : url('../fonts/din/DINPro-Medium.ttf') format('truetype');
    font-weight : 500;
    font-style  : normal;
}

@font-face {
    font-family : 'din-pro';
    src         : url('../fonts/din/DINPro-Regular.woff') format('woff');
    src         : url('../fonts/din/DINPro-Regular.woff2') format('woff2');
    src         : url('../fonts/din/DINPro-Regular.ttf') format('truetype');
    font-weight : 400;
    font-style  : normal;
}
@font-face {
    font-family : 'din-pro-ie';
    src         : url('../fonts/din/DINPro-Regular.eot?');
    font-weight : 400;
    font-style : normal;
}
@font-face {
    font-family : 'din-pro-ie';
    src         : url('../fonts/din/DINPro-Medium.eot?');
    font-weight : 500;
    font-style : normal;
}

IEのフォントをサフィックス-ieで個別に定義したことに注意してください。フォントを使用するときはp { font-family : din-pro, din-pro-ie }のようなことをします。

3
Zankar

確認する必要があるものの1つは

url（ 'HelveticaNeueLTCom-LtCn_0.eot'）を実行する場合、.cssファイルと.eotは同じフォルダーにある必要があります

またはsrc：url（ http://www.example.com/path/to/url/Helvetica.eot ）のような完全なURLパスを実行します

私の知る限り、引用符はオプションです。

ps＃私は長い間ブログにフォントの埋め込みを行っていますが、うまく機能しています。

2
YOU

font-faceの最適な定義は次のとおりです。

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
1
Mahmoud Saleh

Transfonter を使用してTTFフォントを最新の形式（つまり、WOFF）に変換し、次のような強力な@ font-faceを使用できます。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

ソース： https://css-tricks.com/snippets/css/using-font-face/

1
Fred K

私のために働いたのは次の宣言です：

@font-face {
    font-family: 'Frutiger45LightBoldItalic';
    src: local('☺'), url('../font/frutiger-bolditalic-webfont.woff') format('woff'), url('../font/frutiger-bolditalic-webfont.ttf') format('truetype'), url('../font/frutiger-bolditalic-webfont.svg#webfontR2tDy7QH') format('svg'), url('../font/frutiger-bolditalic-webfont.eot');
}

したがって、src属性は1つだけで、.eotは最後に疑問符なしであります。

以前に試したがうまくいかなかった：

  • .eotを別の行に配置する（他のsrcの前後）
  • .eotの後に疑問符を付ける
1
bvgheluwe

IEは、src記述子にフォーマット文字列を含むフォントを受け入れません。その2番目のsrc行が原因である可能性があります。削除した場合（またはフォーマット文字列を削除した場合）

次に-時々、IEは、CSSの値の周りに引用符を使用するかどうかについて少し教訓になります。試してくださいfont-family: "HelveticaLTCN"代わりに？

0
arcwhite

私はパナと同じ問題を抱えていました。 onlinefontconverter.comを使用してttfからeotに変換しました。まあ、それが問題だったようです：atsjrが指摘したように、私はfontsquirrel.comを試してみましたが、すべてがうまく機能しています！

0
Pere

このコードはIEでの私の問題を解決できます：

  @font-face {
      font-family: 'kurdish';
      src: url('font/zkurd_aras.eot?') format('eot'), url('font/zkurd_aras.woff') format('woff'), url('font/zkurd_aras.ttf') format('truetype');}
0
maikel

同様の問題に苦しんでいる間に、DOCTYPEの定義がIEの埋め込みフォントに何らかの影響を与えることに気付きました。 DOCTYPE定義を削除すると、フォントが適切に表示されました。

0
cezary

Font-face属性は、オンラインではなくローカルに向けることを常にお勧めします。 url（ '../ fonts/font-name.eot'）。 IEであり、他のブラウザは、ローカルサーバーでWebページを実行しているときにフォントを「表示」しません。

0
kef

IEについて特別なことは、フォントファミリ名がフォントのプロパティで見つかった名前と正確に同じである必要があるということです。一方、Chromeそして、他の人はあなたが望むフォントファミリーに名前を付けることができますが、IEの場合はそうではありません

0
Alex