问题表现:
使用@font-face引入自定义特殊字体,在IE8环境下报错“@font-face遇到了未知错误”,表现为字体丢失。
问题分析:
我们常用的字体文件的格式如:
- TrueType、Web Open Font格式对于IE浏览器来说,在IE9+版本才支持。IE8只支持Embedded Open Type格式的字体文件(.eot)。所以IE8环境下,想要引入自定义特殊字体,只能想办法转换格式或者下载.eot格式的字体文件。字体格式转换网址
- IE8环境下可以识别.eot字体但是要写format(‘embedded-opentype’)添加验证。
问题解决
<div>字体测试</div>
<style>
@font-face {
font-family: "yhg";
src: url(../fonts/方正清刻本悦宋简体.eot);
src: url(../fonts/方正清刻本悦宋简体.eot?#iefix) format('embedded-opentype'),
url(../fonts/方正清刻本悦宋简体.TTF) format('truetype');
font-weight: normal;
font-style: normal;
}
div {
font-family: "yhg";
}
</style>
模拟IE8环境
效果:
- format用于标注字体的格式,方便浏览器识别。
- ?#iefix:IE8版本环境,当 src 中包含多个 url 时无法正确解析返回 404 ,而其他浏览器没有这个问题。因此将 EOT 格式的引入放在最前面,然后在 url 后加上 ?,这样 IE8环境时会把问号之后的内容当作 url 的参数。 #iefix 一是注释,二是可以将 url 参数变为锚点,减少发送给服务器的字符。
- 两个url:微软修改了在兼容模式下的 CSS 解析器,导致上面提到的使用 ? 的方案失效。由于 CSS 是从下往上解析的,所以在上面添加一个不带问号的 src 属性便可以解决此问题。