网站LOGO
静若安然
页面加载中
12月5日
网站LOGO 静若安然
记录个人学习生活和成长历程
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    Web 前端 woff2 字体体积优化指南
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。

    Web 前端 woff2 字体体积优化指南

    Akria · 原创 ·
    Web开发开发程序设计 · 前端开发技术文档资源Python
    共 4727 字 · 约 3 分钟 · 3510
    本文最后更新于2024年03月20日,已经过了259天没有更新,若内容或图片失效,请留言反馈
    • 最近一直在折腾这小博客,无意间发现一款很好看的字体,但奈何体积太大
    • 查阅了不少文档,最终找到了解决办法,顺便分享给各位读者

    格式介绍

    • 先拓展一下常见的字体格式以及区别
    1. Woff:Woff是一种高效的字体压缩格式,专门用于网页。Woff独有的特点是可以通过快速地压缩和解压缩技术提高网络字体传输的效率,降低网络带宽压力。因此,Woff字体被广泛应用于各类在线站点和平台。
    2. Woff2:Woff22是Web Open Font Format 2.0的缩写,相比于Woff 1.0,Woff2格式可以将字体文件压缩率进一步提升达到30%以上,同时支持更多的OpenType字体特性,提高了字体的质量和可用性。
    3. TrueType(TTF):TTF字体是由Apple和Microsoft为PostScript而开发的字体格式。常用于Mac和Windows操作系统上,TTF一直是最常见的格式,所有主流浏览器都支持它。然而,IE8不支持TTF,且IE9上只有被设置成“installable”才能支持。TTF和OTF字体是没压缩的,因此文件体积大。
    4. ​OpenType(OTF):与TTF相比,OTF字体支持更多的高级特性,如连字、分数、上下文特定的大写和小写形式等。
    5. ​Webdings:这是一种用于网页的特殊字体,包含了各种各样的符号和图形。
    6. Eot(Embedded Open Type):微软创造的字体格式,这种格式只在IE6-IE8里使用。

    体积压缩

    • 如果我们全站使用同一种字体,那么我们可能需要同时加载 Regular、Medium、Bold 等不同字重的文件,但拿鸿蒙字体举例:HarmonyOS_Sans_SC_Regular.ttf 大小高达 8MB,如果不对字体文件进行压缩,将极大增加网页加载速度,严重影响用户体验。
    • WOFF2 获得了广泛的浏览器支持和最佳压缩效果,比 Woff 高出 30%。文件压缩可加快下载速度。Woff2 格式通常是现代浏览器实现完全兼容性所需的唯一格式
      [scode type="blue" size="small"]只有在需要支持旧版浏览器时,您才可能需要使用其他格式(例如 Woff、Eot 和 TTF)。 如果您不需要支持旧版浏览器,则没有理由依赖 Woff2 以外的网页字体格式。[/scode]

    压缩方法

    字体去繁

    • GBK 结尾的字体偏大的原因是包含庞大的繁体字库,大多数网页并不需要,可以使用Python中 fontTools 得到字体的简体中文子集
    • 先看一下Unicode表

      字符集字数Unicode 编码
      基本汉字20902字4E00-9FA5
      基本汉字补充74字9FA6-9FEF
      扩展A6582字3400-4DB5
      扩展B42711字20000-2A6D6
      扩展C4149字2A700-2B734
      扩展D222字2B740-2B81D
      扩展E5762字2B820-2CEA1
      扩展F7473字2CEB0-2EBE0
      扩展G4939字30000-3134A
      康熙部首214字2F00-2FD5
      部首扩展115字2E80-2EF3
      兼容汉字477字F900-FAD9
      兼容扩展542字2F800-2FA1D
      PUA(GBK)部件81字E815-E86F
      部件扩展452字E400-E5E8
      PUA增补207字E600-E6CF
      汉字笔画36字31C0-31E3
      汉字结构12字2FF0-2FFB
      汉语注音43字3105-312F
      注音扩展22字31A0-31BA
      1字3007
    • 基本汉字(4E00-9FA5)区间内,简体字、繁体字是交叉的,没有一个固定的简体区间和繁体区间,所以需要一个简体字的 Unicode 表,经过整理,得到unicodes 文件,再加入 latin 的区间(0000-00FF),以及[post cid="2747" cover="" size=""/]作为参数传入 fontTools 获得字体子集。
    • 下载 Unicode编码文件

    [hide]下载:https://wwu.lanzouo.com/iKUs31mgadsb 密码:a3ud[/hide]

    • 利用Python中Fonttools库可以进行取子集
    • 先把 Unicode编码文件和ttf字体放入一个文件夹中
    • 命令进入该目录,安装相关python库
    python 代码:
    pip install fonttools brotli
    • 介绍一下该工具使用方法
    python 代码:
    pyftsubset <PATH> --unicodes-file=<PATH> --with-zopfli --flavor=woff2
    
    # 参数
    # pyftsubset <PATH>        # 待压缩字体文件路径或者当前目录字体名
    # --unicodes-file=<PATH>   # unicode.txt 文件路径
    # --with-zopfli            # 使用 Google 压缩算法
    # --flavor=<TYPE>          # 输出字体格式
    • pyfsubset可以完成整个流程,直接使用以下命令
    python 代码:
    pyftsubset fonts.ttf  --unicodes-file=sc_unicode.txt --with-zopfli --flavor=woff2
    • 得到最终压缩fonts.subset.woff2文件

    字体压缩

    • 字体压缩也可以使用Google的woff2工具,可实现对ttf格式文件压缩转换和对woff2格式解压缩
      谷歌/WOFF2 (github.com)
      Linux下演示
    python 代码:
    yumt install -y git g++ make
    git clone --recursive https://github.com/google/woff2.git  
    cd woff2
    make clean all
    ./woff2_compress fonts.ttf //压缩fonts.ttf文件为woff2格式
    ./woff2_decompress fonts.woff2  //解压woff2文件为ttf格式

    woff2 Win版

    • 利用google woff2代码打包得win版本,使用方法与linux中相同
    • 下载地址

    [hide]下载:https://wwu.lanzouo.com/ih6Uh1mghgha 密码:3ozx[/hide]

    分片处理

    • 我们可对字体进行分片切割处理,再部署到cdn节点上,这样可以实现在更短时间内加载完字体
    • 在线分割工具,上传ttf文件可分割转换成多个woff2文件
    1. 在线字体分包器 - 免费帮助你将字体部署到网站上 (chinese-font.netlify.app)
    2. KonghaYao/cn-font-split: 划时代的字体切割工具,CJK与任何字符!支持 otf、ttf、woff2 字体多线程切割,完美地细颗粒度地进行包大小控制。A revolutionary font subetter that supports CJK and any characters! It enables multi-threaded subset of otf, ttf, and woff2 fonts, allowing for precise control over package size. (github.com)

    格式转换

    • ttf转woff2可利用上述两种方法,也可采用在线转换

    1.TTF to WOFF2 | CloudConvert
    2.在线字体转换,字体格式转换器|ttf转otf,ttf转woff,ttf转woff2,ttf转eot,ttf转svg,otf转ttf,otf转woff,otf转woff2,otf转eot,otf转svg,woff转ttf,woff转otf,woff转woff2,woff2转ttf,woff2转otf,woff2转woff,dfont转ttf,dfont转otf,pfa转ttf,pfa转otf,pfb转ttf,pfb转otf - 在线工具 - 字客网 (fontke.com)
    3.字体转换器 (在线自由) — Convertio

    声明:本文由 Akria(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。
    现在已有

    17

    条评论
    我要发表评论
    1. 头像
      老刘
      头像 老刘
      • 等级:Lv.1
      • 角色:访客
      • 在线:很久之前

      又来了

      · · · 四川-南充
    2. 头像
      老刘
      头像 老刘
      • 等级:Lv.1
      • 角色:访客
      • 在线:很久之前

      不错,有点意思

      · · · 四川-南充
    3. 头像
      awaae001
      • 等级:Lv.1
      • 角色:访客
      • 在线:三月内

      我记得没错的话,有一个叫:中文中字计划
      他们有一个叫在线字体分包的小工具,分完以后往CDN上面一传就可以直接用了

      · · · 广东-深圳
      1. 头像
        Anran awaae001

        对的,文章中有链接

        · · · 海外
    4. 头像
      网友小宋
      • 等级:Lv.2
      • 角色:访客
      • 在线:很久之前

      字体真好看哈

      · · · 海外
    5. 头像
      HowieHz
      • 等级:Lv.2
      • 角色:访客
      • 在线:很久之前

      好文,mark 了

      · · · 海外
    6. 头像
      清墨的橘
      • 等级:Lv.1
      • 角色:访客
      • 在线:很久之前

      学习了!|´・ω・)ノ

      · · · 江西-赣州
    7. 头像
      ztrztr
      • 等级:Lv.4
      • 角色:访客
      • 在线:本月

      请问一下如何在博客中使用分片后的字体

      · · · 北京-北京
      1. 头像
        Anran ztrztr

        引入导出后的字体css文件,在主题中设置样式:font-family: '字体名',详细可参考下网上教程哦。

        · · · 海外
    8. 头像
      Pnnk
      头像 Pnnk
      • 等级:Lv.2
      • 角色:访客
      • 在线:很久之前

      字体蛮好看的

      · · · 新疆-乌鲁木齐
      1. 头像
        Senc森辞
        头像 Senc森辞
        • 等级:Lv.2
        • 角色:技术 · 好友
        • 在线:本月
        Pnnk

        原来你在乌鲁木齐φ( ̄∇ ̄o)

        · · · 新疆-巴音郭楞蒙古自治州
        1. 头像
          Pnnk
          头像 Pnnk
          • 等级:Lv.2
          • 角色:访客
          • 在线:很久之前
          Senc森辞

          哈哈哈哈,嗯啊

          · · · 海外
          1. 头像
            Senc森辞
            头像 Senc森辞
            • 等级:Lv.2
            • 角色:技术 · 好友
            • 在线:本月
            Pnnk

            直接去你家找你OωO

            · · · 新疆-巴音郭楞蒙古自治州
            1. 头像
              Pnnk
              头像 Pnnk
              • 等级:Lv.2
              • 角色:访客
              • 在线:很久之前
              Senc森辞

              诶,你是库尔勒的啊,我妈在库尔勒,我每年去好多次୧(๑•̀⌄•́๑)૭

              · · · 新疆-乌鲁木齐
              1. 头像
                Senc森辞
                • 等级:Lv.2
                • 角色:技术 · 好友
                • 在线:本月
                Pnnk

                哈哈,不在库尔勒,在阿克苏捏-

                · · · 新疆-阿克苏地区
                1. 头像
                  Akria Senc森辞

                  你这跨半年的回复。哈哈 😅

                  · · · 海外
                  1. 头像
                    Senc森辞
                    • 等级:Lv.2
                    • 角色:技术 · 好友
                    • 在线:本月
                    Akria

                    那可不

                    · · · 新疆-巴音郭楞蒙古自治州
    博客logo 静若安然 记录个人学习生活和成长历程 51统计 百度统计
    ICP 蜀ICP备2023037012号-1

    💻️ Akria 昨天 23:15 在线

    🕛

    本站已运行 7 年 101 天 12 小时 28 分
    静若安然. © 2017 ~ 2024.
    网站logo

    静若安然 记录个人学习生活和成长历程
     
     
     
     
     
     
     
     

    17

    1

    1

  • 下一篇