weui中的字体图标在IE不显示问题
程序员文章站
2022-03-03 13:53:42
...
在IE浏览器报错:CSS3114: @font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。
@font-face {
font-weight: normal;
font-style: normal;
font-family: "weui";
src: url('data:application/octet-stream;base64,AAE...省略') format('truetype');
}
首先需要把@font-face为base64格式的字体信息解码成可用的字体文件
实现步骤:
- 1. 获取到base64字符串并删除头部信息,在这里就是
data:font/opentype;base64,
逗号也要删除,这样就获取到了字体信息。 比如:T1RUTwAJAIAAAwAQQ0ZGIBcEq......过长不展示
。 - 2. 访问http://www.motobit.com/util/base64-decoder-encoder.asp 这个网站,将纯字体信息字符串粘贴进编辑区域,然后下方解码选项选择解码base64字符串 和导出为二进制文件,即:
- 3. 点击转换数据,这样就下载下来一个base64.bin的二进制文件,然后把base64.bin直接改名为weui.ttf(当然可用随便改其它格式);
- 4.然后打开地址https://everythingfonts.com/font-face,然后把weui.ttf格式上传,最后下载到本地,得到多种格式的字体文件(eot,ttf,woff,woff2,svg)。详细转化字体可参考地址:《CSS网页中导入特殊字体@font-face属性详解》。
- 5.最后在自己的样式表中添加如下样式就可以在IE浏览器中显示该字体图标了。
@font-face {
font-weight: normal;
font-style: normal;
font-family: "weui";
src: url('../fonts/weiui.eot'); /* IE9 Compat Modes */
src: url('../fonts/weiui.woff') format('woff'), /* Modern Browsers */
url('../fonts/weiui.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/weiui.svg#weiui') format('svg'); /* Legacy iOS */
}
上一篇: 简单实现${}模板替换功能
推荐阅读
-
快速解决Vue项目在IE浏览器中显示空白的问题
-
IE中iframe标签显示在DIV之上的问题解决方案
-
bootstrap3在IE8下Glyphicons图标不显示问题的解决方法
-
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
-
ExtJS 2.2.1的grid控件在ie6中的显示问题
-
ExtJS 2.2.1的grid控件在ie6中的显示问题_extjs
-
bootstrap字体图标在谷歌显示正常,在火狐显示异常的问题
-
在uni-app中引用iconfont,和遇到图标引入不显示的问题记录
-
vue + elementui的table在ie和火狐中边框不显示的问题
-
在IE11中easyui中一键打开多个tags时页面不显示的问题