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

 

 

 

Logo

前往低代码交流专区

更多推荐