使用Fontmin生成WebFont压缩字体

我上一篇文章(记一次改字体的辛酸史,解决CDN跨域问题)讲的是我改字体的一个过程,用了@font-face的方式,引用了一整个特殊字体,导致网站加载了整个字体文件,访问变慢,所有内容加起来已经有5MB。于是我在找前端如何优化字体加速访问,然而找到的都是Font-Spider(字蛛),看了网上各种教程,无一例外全是一模一样的。 昨天我测试字体的时候用过有字库,有字库就是一个典型的webfont,我就在想有没有跟有字库差不多的webfont引用方式,不直接引用整个字体,而是引用需要用到字,终于,我在GitHub上找到了这个15年的项目Fontmin,我直接下载了他的客户端,Fontmin提供了Mac os & Windows客户端。只需要将ttf原字体拖入客户端,输入需要用到的字,即可一键生成字体和css配置。

生成之后,会创建以你原字体名开头的eot,ttf,woff,css文件

由于我源站国内访问并不是很快,我修改了css内容,上传字体到我的腾讯云cos并链接,有两个css,一个是name.css,一个是name-embed.css,以下是我的配置

@font-face {
    font-family: "f";
    src: url("cdn.elstec.cn/test/f.eot"); /* IE9 */
    src: url("cdn.elstec.cn/test/f.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */

    url("cdn.elstec.cn/test/f.woff") format("woff"), /* chrome、firefox */
    url("cdn.elstec.cn/test/f.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */

    url("cdn.elstec.cn/test/f.svg#f") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

以下是embed文件

@font-face {
    font-family: "f";
    src: url("cdn.elstec.cn/test/f.eot"); /* IE9 */
    src: url("cdn.elstec.cn/test/f.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */

    url(data:application/x-font-ttf;charset=utf-8;base64,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) format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */

    url("cdn.elstec.cn/test/f.svg#f") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

我又上传这两个css到cos,用这两句代码引用

<link rel="stylesheet" href="https://cdn.elstec.cn/test/f.css" />
<link rel="stylesheet" href="https://cdn.elstec.cn/test/f-embed.css" />

刷新就看到效果啦。(跨域报错的话,请看我上一篇文章)

看完了全文为什么不评论一下呢?xd