vue-cli3.x引用element-ui框架后,在IE中报错:@font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的

vue-cli3.x引用element-ui框架后,在IE中报错:@font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的

后来仔细查了一下是icon字体在ie下支持程度的问题

浏览器font-face支持

这是我们在查一下element-ui的源码样式,你会发现只有.woff和.ttf两种类型的字体,没有.eot类型的字体

element-ui的源码样式

所以这个问题的解决办法就是添加一个支持ie的.eot类型的icon字体文件,并引入到element-ui的样式表中

步骤一:

选取 “node_modules\element-ui\lib\theme-chalk\fonts” 目录下的任意一个文件,转换为.eot类型文件(我选用的.ttf),转换的网站 “http://www.font2web.com/”

字体 转换的网站

步骤二:

下载并解压,得到.eot类型文件

.eot类型文件

步骤三:

将.eot类型文件放入到 “node_modules\element-ui\lib\theme-chalk\fonts”目录下

fonts目录下的字体文件

步骤四:

放入后在 “node_modules\element-ui\lib\theme-chalk\index.css” 中添加

url("fonts/element-icons.eot?#iefix") format("embedded-opentype")

index.css

步骤五:

打包上传至服务器,然后在ie中刷新访问就可以看到页面正常了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容