把vux中的@font-face为base64格式的字体信息解码成可用的字体文件

在最近移动端项目中用到了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 */
}

参考地址:

原文地址:https://www.cnblogs.com/moqiutao/p/8945131.html

时间: 2024-10-11 22:44:44

把vux中的@font-face为base64格式的字体信息解码成可用的字体文件的相关文章

在WPF应用程序中使用Font Awesome图标

Font Awesome 在网站开发中,经常用到.今天介绍如何在WPF应用程序中使用Font Awesome . 如果是自定义的图标字体,使用方法相同. 下载图标字体 在官方网站或github上下载资源 http://fontawesome.io/#modal-download https://github.com/FortAwesome/Font-Awesome 解压下载的文件(我是在github上下载的源码),我们要使用的是其中css和fonts文件夹中的内容 在项目中加入字体 新建WPF应

如何在window Form中使用Font Awesome?

随着技术的发展,web上以前的图片按钮现在逐步换成了图标字体,这些图标字体是矢量的,矢量图意味着每个图标都能在所有大小的屏幕上完美呈现,可以随时更改大小和颜色,而且不失真,真心给人一种“高大上”的感觉.由于Font Awesome是完全免费的,无论个人还是商业使用,因此这种字体库使用的比较多.Font Awesome一个字体文件包含了非常多的实用图标,可以 助你完整表达web页面上每个动作的含义(图优于表,表优于文字). Font Awesome完全从头设计的整套图标,完全和Bootstrap兼

如何在photoshop等图像编辑软件中使用Font Awesome字体图标

1.首先要下载Font Awesome字体,解压后在fonts文件夹中找到FontAwesome.otf文件,双击安装字体.如下图: 2.重启你的photoshop或者其他图像编辑软件,确保字体被软件载入. 3.在Font Awesome4.2.0所有字体图标参考页面找到你想要的图标,(注意:是图标而不是class样式),将其复制.如图: 4.回到photoshop,将其粘贴在画布上,这时得到的是一个乱码选择"字体工具",选择这个字体图标,然后在字体选项中选择Font Awesome字

delphi 10.1 Berlin 中使用自带的 Base64 编码

delphi 10.1 berlin版本中,有好几个 base64 编码的单元可以使用,例如 Indy, MessageDigest_5,还有 CnBase64,我现在使用自带的 System.NetEncoding. var params: string; Digest: TBytes; Base64: TBase64Encoding; begin Base64 := TBase64Encoding.Create; params := Base64.EncodeBytesToString(Di

在Qt中使用Font Awesome图标

做过Web前端开发的一定对Font Awesome不会陌生,Font Awesome号称是为Bootstrap设计的完美图标字体,经常出现在各类网页中,非常流行. 这么好的资源,能不能在Qt应用程序中使用呢?答案是肯定的.而且使用起来非常简单. 1. 先来了解下 Font Awesome 的一些特性: 更多关于Font Awesome可以前往其官网[了解详情]. 2. 下载 Font Awesome(本示例使用的是Font-Awesome-3.2.1版) 解压后得到的文件如下: [font]目录

bootstrap4中使用Font Awesome图标

bootstrap4中默认取消了Font Awesome图标的应用,所以如果要使用相关图标就需要我们自己手动添加,具体步骤如下: 1.下载Font Awesome 下载地址 基本图标下载免费版就可以了.下载 free for web` 2.将下载的文件解压到bootstrp4目录中 3.在html页面中添加引用,引用css文件夹中 all.css` <link rel="stylesheet" href="fontawesome-free-5.11.2-web/css/

js中图片base64格式转文件对象

通常我们使用裁剪工具裁剪图片后输出的格式为base64格式,而有时需要将图片转为源文件. 可用如下方法 function dataURLtoFile(dataurl, filename) {//将base64转换为文件,dataurl为base64字符串,filename为文件名(必须带后缀名,如.jpg,.png) var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n =

ajax异步上传图片文件并将其转换为base64格式

高级浏览器上面,可以直接使用html5的FileReader,实现获取上传文件的base64格式,并以字符串形式提交.对于IE9以下的浏览器,就得另想他法.下面是高级浏览器的示例代码. $('.image').change(function(e) { var target = $(e.target); var file; if(target[0].files && target[0].files[0] ) { file = target[0].files[0]; } if(file) {

使用Base64格式的图片制作ICON

使用Base64格式的图片制作ICON的优势是Base64图片可以减少请求次数:加快首屏数据的显示速度:使用这种方式不会对图片压缩 使用base64工具将图片转成字符串 使用站长工具可以将图片转成字符串,直接将图片上传即可,地址:http://tool.chinaz.com/tools/imgtobase 将转成的字符串应用到网页中 直接将转成的字符串放入到img标签的src下即可