博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
把vux中的@font-face为base64格式的字体信息解码成可用的字体文件
阅读量:5297 次
发布时间:2019-06-14

本文共 1198 字,大约阅读时间需要 3 分钟。

在最近移动端项目中用到了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. 访问 这个网站,将纯字体信息字符串粘贴进编辑区域,然后下方解码选项选择解码base64字符串 和导出为二进制文件,即:

  • 3. 点击转换数据,这样就下载下来一个base64.bin的二进制文件,然后把base64.bin直接改名为weui.ttf(当然可用随便改其它格式);
  • 4.然后打开地址,然后把weui.ttf格式上传,最后下载到本地,得到多种格式的字体文件(eot,ttf,woff,woff2,svg)。详细转化字体可参考地址:《》。
  • 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 */}

参考地址:

转载于:https://www.cnblogs.com/moqiutao/p/8945131.html

你可能感兴趣的文章
java11写泛型_[ 转载 ] Java基础11--Java总结篇系列:Java泛型
查看>>
Java模板引擎解析原理_groovy 模板引擎实现原理分析
查看>>
python workspace_python报错汇总
查看>>
python 模拟登录web 库_[Python] Python 模拟登录,并请求
查看>>
python图色模拟脚本_利用python编写一个图片主色转换的脚本
查看>>
java jdts mssql_JSP直连MSSQL代码示例
查看>>
java socket datainputstream_Java DataInputStream.available方法代碼示例
查看>>
php接口百度百科_php接口由什么组成
查看>>
php手机验证码源码,php验证码实现源码
查看>>
php fpm高并发,php服务器高并发优化思路
查看>>
php gd 图像翻转,php(gd库)输出中文图像的转换函数
查看>>
java 表头添加复选框,表头带有CheckBox可以实现全选的jtable
查看>>
java b组 小计算器,简单计算器..
查看>>
php server port,$_SERVER[‘SERVER_PORT’]关于php5.2一个bug
查看>>
php 类 init,PHP内核探索:类的定义
查看>>
java的二叉树树一层层输出,Java构造二叉树、树形结构先序遍历、中序遍历、后序遍历...
查看>>
meep php,麻省理工时域差分软件 MEEP windows 下编译开发(一)——准备工作
查看>>
matlab的清除0,matlab中的平均值clear %清除变量dx=0.01*2*pi; %间隔x=0:dx:2*pi; %自变量向量y=...
查看>>
php 循环套 重复,php 循环套循环 出现重复数据
查看>>
mysql distince,MySQL学习(未完待续)
查看>>