0

font-awesome を使用して (gem を使用せずに) Rails アプリのアイコン フォントを生成しました。作成したアイコン フォントは、Chrome、FF、Safari、および IE10/11 で動作しますが、IE9 では動作しません。次のコードで最小限のテスト ケースを作成しました。これは IE9 以外のすべてで動作します (これは Rails ではなく、html ファイル、css ファイル、およびフォント ファイルのみです)。

CSS:

@font-face {
  font-family: "my-icons";
  src: url("my-icons.eot");
  src: url("my-icons.eot?#iefix") format("embedded-opentype"),
       url("my-icons.woff") format("woff"),
       url("my-icons.ttf") format("truetype"),
       url("my-icons.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

.icon-test:before {
  font-family: "my-icons";
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
}

.icon-test:before { content: "\f113"; }

HTML:

<html>
<head>
    <link rel="stylesheet" href="styles/font_face.css">
</head>
    <div class="test-container">
        test
        <i class="icon-test"></i>
    </div>
</html>

これは、Chrome と FF では問題なく機能しますが、IE9 では機能しません。私はフォーマット、MIME タイプ (実際の Rails アプリ内) をいじりましたが、次にどこに行けばよいのかよくわかりません。考え？

4

1 に答える 1

0

私はカスタム フォントをよく使用しますが、これまでのところ問題はありませんでした。以下は私が使用するものです

@font-face {
font-family: "my-icons";
src: url("my-icons.eot?#iefix");
src: url("my-icons.eot?#iefix") format("eot"),
   url("my-icons.woff") format("woff"),
   url("my-icons.ttf") format("truetype"),
   url("my-icons.svg") format("svg");
font-weight: normal;
font-style: normal;
}
于 2013-09-13T04:03:14.110 に答える