特殊字体文件转Base 64格式的处理步骤

[Tingglelaoo]

在一些场景下，我们可能只需要特殊字体的数字部分，那么如果引入整个特殊字体文件则会很冗余，那么我们可以通过一些字体压缩工具（如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;
}