vue-cli3 element-ui 打包后 IE中报错 @font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。

框架：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图标正常显示