把vux中的@font-face为base64格式的字体信息解码成可用的字体文件 CSS网页中导入特殊字体@font-face属性详解

前端之家收集整理的这篇文章主要介绍了把vux中的@font-face为base64格式的字体信息解码成可用的字体文件 CSS网页中导入特殊字体@font-face属性详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

文件: UwCtGsNCf5NCQ0N....

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

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

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

于是想到了把base64格式字体转换为可用的字体文件

实现步骤:

    @H_502_45@1. 获取到base64字符串并删除头部信息,在这里就是data:font/opentype;base64, 逗号也要删除,这样就获取到了字体信息。 比如:T1RUTwAJAIAAAwAQQ0ZGIBcEq......过长不展示 。 @H_502_45@2. 访问http://www.motobit.com/util/base64-decoder-encoder.asp 这个网站,将纯字体信息字符串粘贴进编辑区域,然后下方解码选项选择解码base64字符串 和导出为二进制文件,即:


        src: url('../fonts/weiui.eot'); /* IE9 Compat Modes */ url('../fonts/weiui.woff') format('woff'), Modern Browsers */
    url('../fonts/weiui.ttf')  format('truetype'),1)"> Safari,Android,iOS 
    url('../fonts/weiui.svg#weiui') format('svg');  Legacy iOS */
}

参考地址:

猜你在找的Vue相关文章