Question

这是我的代码：

@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;

}

我无法显示字体图标

Answer 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;

}

另一种情况可能是文件位于网站根目录中的另一个文件夹中，但字体文件位于完全独立的文件夹中的 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;

}

这取决于您如何在代码中指向URL源。就像我说的，我以前曾多次遇到这个问题。先试一下，看看是否有帮助。

你可以做的另一件事就是跟他回答的那个人一样：@font-face works in IE8 but not 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;

}

希望这有帮助！

Answer 2

试试这个：

@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 font post

Answer 3

你有没有试过： http://jsfiddle.net/xGLaz/？

或者您必须按font-family: 'font-icon';

更改font-family:'RichStyle';

Answer 4

以下是使用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}是字体的 RELATIVE 位置。

IE9中不显示不可导入的字体

4 个答案: