vue-cli3 element-ui 打包后 IE中报错 @font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。
框架:vue-cli3element-ui版本:"^2.8.2"问题:打包放到服务器上后,在ie中和以ie为内核的浏览器(例360兼容模式)下不能正常显示icon图标,且控制台报错“@font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。”首先,font-face是css3的字体规则,对于浏览器的支持情况如下图在项目的 “node_modul...
框架:vue-cli3
element-ui版本:"^2.8.2"
问题:
打包放到服务器上后,在ie中和以ie为内核的浏览器(例360兼容模式)下不能正常显示icon图标,且控制台报错
“@font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。”
首先,font-face是css3的字体规则,对于浏览器的支持情况如下图
在项目的 “node_modules\element-ui\lib\theme-chalk\fonts” 目录下有 "element-ui.ttf" 和 "element-ui.woff" 两个文件,且在 “node_modules\element-ui\lib\theme-chalk\index.css” 引用了这两个文件
就此,解决问题的办法就是添加一个eot文件。
1.选取 “node_modules\element-ui\lib\theme-chalk\fonts” 目录下的任意一个文件,转换为eot文件(我选用的.ttf),转换的网站 “http://www.font2web.com/”
2.转换完之后会有一个压缩文件,解压后文件
解压后的文件夹:
将.eot后缀文件放入到 “node_modules\element-ui\lib\theme-chalk\fonts” 目录下
放入后在 “node_modules\element-ui\lib\theme-chalk\index.css” 中添加
url("fonts/element-icons.eot?#iefix") format("embedded-opentype")
3.重新打包,放入服务器后,再次访问icon图标正常显示
更多推荐
所有评论(0)