使用Fontmin生成WebFont压缩字体

2021-09-09 11:44:54 浏览数 (1)

我上一篇文章(记一次改字体的辛酸史，解决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，以下是我的配置

代码语言：javascript复制
@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文件

代码语言：javascript复制
@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,AAEAAAAKAIAAAwAgT1MvMmAtawkAAACsAAAAYGNtYXCvY9BaAAABDAAAAYpnbHlmEnhSBAAAApgAABF0aGVhZAr97/0AABQMAAAANmhoZWEB2ADPAAAURAAAACRobXR4BVkAVwAAFGgAAAAmbG9jYQ kE4IAABSQAAAAGG1heHAAFQFIAAAUqAAAACBuYW1lYxsmxwAAFMgAAAM6cG9zdPWDr3QAABgEAAAAWAAEALkBkAAFAAgAgACAAAAAEACAAIAAAACAAAsAQAoHAgAAAAAAAAAAAKAAEr8QAAAAAAgAEgAAAABCREZaAEAAQ2vrAN//3wAXAN8AOgAEAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAAAAACEAAMAAQAAABwABABoAAAAFgAQAAMABgBDAEoAUwBZAHxOOk9cZeBr6/////8AAABDAEoAUwBYAHxOOk9cZeBr6///////vv 4/7D/rP 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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，用这两句代码引用

代码语言：javascript复制
<link rel="stylesheet" href="https://cdn.elstec.cn/test/f.css" />
    <link rel="stylesheet" href="https://cdn.elstec.cn/test/f-embed.css" />

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

css 对象存储

0 人点赞