IE 拒绝解释 @font-face 规则,即使首先使用 eot 文件和“src: local('☺'), ...”黑客第二
我已经读了很多这方面的书,并尝试了很多不同的事情,但仍然没有成功。这是我的 @font-face 规则之一的示例:
@font-face {
src: url('/lib/fonts/Museo/Museo500-Regular.eot');
src: local("☺"),
url('/lib/fonts/Museo/Museo500-Regular.ttf') format('opentype');
font-family: Museo;
font-weight: 500;
}
我检查了我的路径并尝试了各种 CSS,但没有任何方法可以使字体在 IE 中呈现。以下是一次使用所有自定义字体的示例页面:
http://test.thenewhive.com/test/ fonts
在所有其他浏览器中看起来都很好。
I've done a lot of reading on this, and tried a lot of different things, and still no dice. Here's an example of one of my @font-face rules:
@font-face {
src: url('/lib/fonts/Museo/Museo500-Regular.eot');
src: local("☺"),
url('/lib/fonts/Museo/Museo500-Regular.ttf') format('opentype');
font-family: Museo;
font-weight: 500;
}
I've checked my paths and tried various CSS, and nothing will make the fonts render in IE. Here's an example page that uses all the custom fonts at once:
http://test.thenewhive.com/test/fonts
It looks fine in all other browsers.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我不知道它是否真的与您的 IE 问题有关,但是这里的
format('opentype')
部分是错误的,因为您的 TTF 文件是 TrueType 文件。它应该是format('truetype'
)。话虽这么说,我强烈建议您使用 Font Squirrel @font-face 生成器之类的东西来防止任何错误。 http://www.fontsquirrel.com/fontface/generator
如果您更喜欢手动执行此操作,我建议您看一下这篇文章:http://readableweb.com/new-font-face-syntax-simpler-easier/ 它很好地解释了要使用的正确语法,只需确保您阅读了全部内容即可对原始帖子进行了一些更新。
I don't know if it actually has anything to do with your IE problem, but the
format('opentype')
part here is wrong, as your TTF file is a TrueType file. It should beformat('truetype'
).That being said, I highly suggest you use something like the Font Squirrel @font-face generator to prevent any mistake. http://www.fontsquirrel.com/fontface/generator
If you prefer doing it manually, I suggest you take a look at this article : http://readableweb.com/new-font-face-syntax-simpler-easier/ it does a great job explaining the right syntax to use, just make sure you read it all since there has been some updates to the original post.