css - 无法导入的字体在 IE9 中不显示

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;

}

希望这对您有所帮助!