900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 字体图标在ie兼容问题(element低版本icon)(图标在ie浏览器不显示)

字体图标在ie兼容问题(element低版本icon)(图标在ie浏览器不显示)

时间:2020-01-02 00:36:01

相关推荐

字体图标在ie兼容问题(element低版本icon)(图标在ie浏览器不显示)

在项目开发过程中,项目用到的是element组件,版本号是2.4.7,遇到了图标字体在ie浏览器不显示的问题,这是在同事电脑出现的bug,我电脑同样是ie,11版本和10版本都没有问题,但是在同事电脑哪个版本都显示不出来,纠结了半天

看到ie里报的错误是这样的

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

在网上搜都是千篇一律的答案,像这样的:

核心就是ie不支持eot字体,需要特定转换:url('fonts/webfont.eot?#iefix') format('embedded-opentype')

可是我用的是element,上哪去转换这个字体图标?当然得去element里了,一种方式是直接修改里面的源码,可是我的项目是线上打包,所以在本地修改源码是部署不到线上去的,故我采取了第二种方式:样式覆盖

1、首先看elementicon相关的样式或者说需要修改的部分:

node-modules文件夹下找到组件位置

2、找到fonts文件夹,eot文件初始是不存在的,为兼容ie,你需要把woff文件或者ttf文件在网上找个在线转换器转换成eot文件以便后面使用

3、按照上图箭头方向找到index.css,打开并找到设置icon图标的样式

如图:红色框内就是需要修改的位置,黄色框内就是需要添加的内容,下面看看怎么覆盖它们:

4、首先把第一张图的fonts文件夹下的三种类型图标复制到项目静态文件夹下

5、然后在项目公共样式部分填写样式覆盖element中图标设置样式,让兼容eot生效

/*common.css*/@font-face {font-family: element-icons;src: url('fonts/element-icons.woff') format("woff"),url('fonts/element-icons.ttf') format("truetype"),url('fonts/element-icons.eot?#iefix') format("embedded-opentype");font-weight: 400;font-style: normal;}

这样就完全实现了在ie中兼容图标的写法,欢迎指正与补充

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。