【IE11】CSS3114: @font-face 未能完成 OpenType 嵌入权限检查

目录

一. 场景再现 

报错内容:CSS3114: @font-face 未能完成 OpenType 嵌入权限检查

报错原因:@font-face 中有 嵌入权限 ( embedding permissions ) ,IE浏览器对 Web字体 的嵌入需要这个权限

报错解决方案:针对 IE浏览器,将 EOT字体格式 修改成 'embedded-opentype'【翻译:嵌入式打开类型】,可以解决此问题

二. 修改示例


@font-face —— 用于把自定义的 Web字体 嵌入到网页中,这样网页就可以不受客户端字体库的限制


一. 场景再现 

  • 使用 @font-face 的页面进行 本地测试,各浏览器字体显示正常;
  • 但上传至服务器端后访问,IE11 不能正常显示 Web字体,Chrome 和 Firefox 字体显示均正常;
  • 报错如图:

  • 报错内容:CSS3114: @font-face 未能完成 OpenType 嵌入权限检查


  • 报错原因:@font-face 中有 嵌入权限 ( embedding permissions ),IE浏览器对 Web字体 的嵌入需要这个权限


  • 报错解决方案:针对 IE浏览器,将EOT字体格式修改成'embedded-opentype'【翻译:嵌入式打开类型】,可以解决此问题


二. 修改示例

  • 修改前的 引入字体部分 的代码:
@font-face {
    font-family:'SourceHanSansCN-Normal';
    src:url('fonts/SourceHanSansCN-Normal.eot');
    src:local('☺'),
        url('fonts/SourceHanSansCN-Normal.woff') format('woff'),
        url('fonts/SourceHanSansCN-Normal.ttf') format('truetype'),
        url('fonts/SourceHanSansCN-Normal.svg#webfontOTINA1xY') format('svg');
        font-weight:normal;
        font-style:normal;
}

  • 修改后的 引入字体部分 的代码,多了一句话:url('fonts/SourceHanSansCN-Normal.eot?#iefix') format('embedded-opentype')
@font-face {
    font-family:'SourceHanSansCN-Normal';
    src:url('fonts/SourceHanSansCN-Normal.eot');
    src:local('☺'),
        url('fonts/SourceHanSansCN-Normal.eot?#iefix') format('embedded-opentype'),
        url('fonts/SourceHanSansCN-Normal.woff') format('woff'),
        url('fonts/SourceHanSansCN-Normal.ttf') format('truetype'),
        url('fonts/SourceHanSansCN-Normal.svg#webfontOTINA1xY') format('svg');
        font-weight:normal;
        font-style:normal;
}

版权声明:本文为Lyrelion原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。