特殊字体文件转Base 64格式的处理步骤
Opened this issue · 0 comments
Tingglelaoo commented
在一些场景下,我们可能只需要特殊字体的数字部分,那么如果引入整个特殊字体文件则会很冗余,那么我们可以通过一些字体压缩工具(如fontmin)进行有选择性地压缩,选择我们只需要的数字部分进行引入。
而另外,字体文件可能会涉及到跨域的问题,要么我们需要运维去设置可允许跨域,又或者是更快的快速的处理办法——转为Base 64格式进行内联引入。
下面,我们来介绍如果将字体文件(ttf格式)转化为Base 64格式:
-
1.选择所需要的字体内容部分进行压缩,可使用工具fontmin,或者使用我们开发的在线压缩字体工具jdc webfont
-
2.通过一些格式转化工具进行ttf格式转为Base 64格式,这里推荐giftofspeed - File To Base 64 Encoder,转化速度快。
-
3.补充字体文件类型的MIME的头信息,在粘贴复制来的Base 64编码信息前添加
data:application/font-ttf;charset=utf-8;base64,
$steelfish: "data:application/font-ttf;charset=utf-8;base64,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";
@font-face {
font-family: "steelfish";
src: url($steelfish) format("truetype");
font-style: normal;
font-weight: normal;
}