CSS网页中导入特殊字体@font-face属性详解

匿名 (未验证) 提交于 2019-12-02 21:53:52

在最近移动端项目中用到了vux,感觉用着还习惯,当把vux使用到PC端的时候出现了IE浏览器出现,这样的错误信息:

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

文件: UwCtGsNCf5NCQ0N....

然后在IE浏览器页面中的字体图标就没有显示。

原来在vux中weiui_font.less文件中,如下写法:

@font-face {     font-weight: normal;     font-style: normal;     font-family: "weui";     src: url('data:application/octet-stream;base64,AAE...省略') format('truetype'); }

于是想到了把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 */ }

参考地址:

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!