框架:vue-cli3

element-ui版本:"^2.8.2"

问题:

打包放到服务器上后,在ie中和以ie为内核的浏览器(例360兼容模式)下不能正常显示icon图标,且控制台报错

@font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。

首先,font-face是css3的字体规则,对于浏览器的支持情况如下图

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

在项目的 “node_modules\element-ui\lib\theme-chalk\fonts” 目录下有 "element-ui.ttf" 和 "element-ui.woff" 两个文件,且在 “node_modules\element-ui\lib\theme-chalk\index.css” 引用了这两个文件

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

就此,解决问题的办法就是添加一个eot文件。

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

2.转换完之后会有一个压缩文件,解压后文件

解压后的文件夹:

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

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

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

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

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

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

3.重新打包,放入服务器后,再次访问icon图标正常显示

 

 

 

相关文章:

  • 2021-06-02
  • 2021-06-07
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-05-20
  • 2021-05-23
猜你喜欢
  • 2021-12-03
  • 2021-07-12
  • 2021-04-17
  • 2021-08-19
  • 2022-12-23
  • 2021-06-04
  • 2021-08-17
相关资源
相似解决方案