1

これは私のコードです:

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

}

フォントアイコンを表示できません

4

4 に答える 4

1

私自身、これまで何度も悩みました。HTML/CSS ファイルに関連して、ルート フォルダーと比較して、フォント ファイルをダウンロードした場所を確認します。

たとえば、すべてのフォントがルート フォルダーの同じ場所にある場合、上記のコードは正しいです。

他に 2 つのシナリオが発生する可能性があります。1 つ目は、ルート内のフォルダーにあるfontsという名前の新しく作成されたフォルダーにそれらをダウンロードした場合、コードは次のようになります。

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

}

もう 1 つのシナリオは、ファイルが Web サイトのルート ディレクトリ内の別のフォルダーにあるが、フォント ファイルが完全に別のフォルダーにあるフォントにある場合です。アクセスする方法は、次のように別の相対リンクを作成することです。

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

}

コード内で URL ソースをどのように指すかによって異なります。私が言ったように、私はこれまで何度もこの問題を抱えてきました。最初にこれを試して、それが役立つかどうかを確認してください。

あなたができる他のことは、この人が彼の答えに投稿したのと同じことをすることです: @font-face works in IE8 but not IE9

彼はまた、この smileyface-local:src: local("☺"),をコードに追加したので、コードは次のようになります。 

@font-face {
    font-family: 'font-icon';
    src: url('fonts/richstyle-webfont.eot');
    src: local("☺"); <-- should've been a semi-colon
    src: url('fonts/richstyle-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/richstyle-webfont.woff') format('woff'),
         url('fonts/richstyle-webfont.ttf') format('truetype'),
         url('fonts/richstyle-webfont.svg#richstylemedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

以下は、コードを書き出すためのより良い方法です。これを試して、どのように機能するかを確認してください。

@font-face {
    font-family: 'font-icon';
    src: local("☺"), 
         url('fonts/richstyle-webfont.eot') format('eot'),
         url('fonts/richstyle-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/richstyle-webfont.woff') format('woff'),
         url('fonts/richstyle-webfont.ttf') format('truetype'),
         url('fonts/richstyle-webfont.svg#richstylemedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

お役に立てれば！

于 2012-12-05T09:34:00.743 に答える
0

RichStyle フォントの使用方法は次のとおりです: http://richstyle.org/richstyle-theme/theme.css

私はこのようなことを意味します：

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

}

{url} は、フォントの相対位置です。

于 2013-05-23T20:50:40.250 に答える
0

http://jsfiddle.net/xGLaz/を試しました か?

font-family: 'font-icon';または、変更する必要があるかもしれませんfont-family:'RichStyle';

于 2012-12-05T10:36:35.440 に答える
0

これを試して：

@font-face {
  font-family: 'font-icon';
  src: url('fonts/richstyle-webfont.eot');
  src: local('?'),
         url('fonts/richstyle-webfont.otf') format('opentype');
}

またはこれ

@font-face {
  font-family: 'font-icon';
  src: url('fonts/richstyle-webfont.eot?') format('eot'), 
  url('fonts/richstyle-webfont.woff') format('woff'), 
  url('fonts/richstyle-webfontb.ttf') format('truetype');
}

これは、Paul Irish のBulletproof フォントの投稿からのものです。

于 2012-12-05T09:51:56.860 に答える