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 文件相关的根文件夹相比，您下载字体文件的位置。

例如，如果所有字体都位于根文件夹中的同一位置，则上面的代码是正确的。

可能会出现另外两种情况。第一个是如果您将它们下载到一个新创建的名为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;

}

另一种情况可能是该文件位于您网站根目录中的另一个文件夹中，但字体文件位于完全独立文件夹中的字体中。访问它的方法是创建一个不同的相对链接，如下所示：

@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 在 IE8 中有效，但在 IE9 中无效

他还将这个笑脸本地：添加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

Try this:

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

or this

@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');
}

This comes from Paul Irish's Bulletproof font post

于 2012-12-05T09:51:56.860 回答
0

您是否尝试过：http: //jsfiddle.net/xGLaz/？

或者也许你必须font-family: 'font-icon';改变font-family:'RichStyle';

于 2012-12-05T10:36:35.440 回答
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 回答