0

CSS をインラインにしようとしていますが、これによりいくつかの問題が発生します。私は font-awesome を使用しています。

@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.eot');
  src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('font/fontawesome-webfont.woff') format('woff'), url('font/fontawesome-webfont.ttf') format('truetype'), url('font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

CSSで。したがって、これがインライン化されている場合は機能しません (ページにアイコンが表示されません)。これは、これをインラインで実行できないことを意味しますか?

追加情報：

html:

<style type="text/css">
@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.eot');
  src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('font/fontawesome-webfont.woff') format('woff'), url('font/fontawesome-webfont.ttf') format('truetype'), url('font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon-wrench:before {
  content: "\f0ad";
}
</style>

<i class="icon-wrench"></i>

次のようにスタイルシートにリンクすると、正しく表示されました。

<link href="style.css" rel="stylesheet">

しかし、そうではありません。上記の方法のようです。

4

2 に答える 2

0

これを試して：

@font-face {
    font-family: 'FontAwesome';
    src: url('font/fontawesome-webfont.eot');
    src: local('☺'), url('font/fontawesome-webfont.woff') format('woff'), url('font/fontawesome-webfont.ttf') format('truetype'), url('font/fontawesome-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

私はこれを使用していますが、すべてのブラウザで動作します。

于 2013-05-30T09:54:25.287 に答える
0

フォントファイルへのパスが正しいことを確認しましたか?

外部スタイルシート内のパスは、そのスタイルシートの場所に対して相対的であるのに対し<style>、パス内では HTML ドキュメントの場所に対して相対的なものとして扱われることに注意してください。

于 2013-05-30T10:51:45.510 に答える