侧边栏壁纸

为Typecho制作霞鹜文楷字体压缩版附woff2格式

  • bosir 原创作品 2个月前
  • 博文 typechowoff2字体
  • 598阅读10评论
  • 最近,一直在研究如何为Typecho更换一个好看的字体,尝试了oppo Sans 、HarmonyOS Sans这些字体后,感觉都不是特别的理想。直到遇见了 LXGW WenKai GB / 霞鹜文楷 GB ,一款由@霞鹜lxgw [B站]制作的非常漂亮的美观的开源字体。

    作者提供的版本是TTF格式,如果直接转换成woff2格式,也还有约8MB大小,别说放在服务器加载了,即使放在CDN加载也比较缓慢。后来看到有关文章,发现可以使用fonttools工具进行压缩,而这也让我的woff2文件成功的降到了约1.8MB大小,已经基本能满足我的需求了。

    这次压缩,需要用到四个东西,分别是:

    Python、pip 、sc_unicode.txt、LXGWWenKaiGBScreen.ttf

    Python

    官网下载Python编译器和pip两个文件进行安装,安装完成后,需要运行电脑的CMD命令符。

    输入 -m pip install --upgrade pip 为python安装pip命令

    输入 pip install fonttools 在python安装FontTools字库

    成功的话,会得到以下提示:

    pip安装

    不成功的话,查看一下PIP命令是否成功,如果不成功检查一下环境变量。

    随后,我们需要把sc_unicode.txt和LXGWWenKaiGBScreen.ttf新建一个文件夹,并放在一起

    输入 pyftsubset LXGWWenKaiGBScreen.ttf --unicodes-file=sc_unicode.txt 即可获取一个新文件,如图所示

    woff2

    这个新文件就是压缩精简过后的TFF文件,其中sc_unicode.txt就是简体中文 Unicode 表,只留常用的字体符号,不需要的都被剔除了。

    最后一步,我们使用在线工具,把获得的TFF文件转换成woff2后,即可使用。

    最后,附上本次制作文件,所需的工具链接地址以及LXGW WenKai GB / 霞鹜文楷 GB woff2压缩版

    名称地址
    Pythonhttps://www.python.org/
    piphttps://pypi.org/project/pip/
    sc_unicode.txthttps://wwtx.lanzout.com/iKnvp0melzha
    cloudconverthttps://cloudconvert.com/png-to-webp
    霞鹜文楷TTFhttp://lxgw.ysepan.com/
    霞鹜文楷压缩版https://wwxn.lanzouu.com/i7Shc1h5q26d
    昵称
    邮箱
    网址
    取消
    1. 头像
      皇家元林
      iOS 16.6.1   Mozilla Compatible
      回复

      我也是调用的 效果不错
      压缩的话 1.8M 还是感觉太大了

      1. 头像
        bosir 博主
        Windows 10   Google Chrome
        回复
        @皇家元林

        调用有一个缺点就是请求太多,反正我放在CDN,1.8MB也能接受。后续在研究研究字蛛工具,看能不能继续搞小点。

    2. 头像
      大峰
      Windows 10   Firefox
      回复

      转换成woff2后,再如何自己使用?上传到服务器,然后怎么操作啊,不懂,我是直接调用别人的

      1. 头像
        bosir 博主
        Windows 10   Google Chrome
        回复
        @大峰

        我目前也是调用的,自己上传的话,需要在主题里面调用字体,关键会影响首页渲染速度,我也没有用自己上传的。

    3. 头像
      夕格树洞
      Windows 10   Firefox
      回复

      现在很多人都在用这个字体,我站点也是ty的,用的他人的字体插件,轻松切换使用

      1. 头像
        bosir 博主
        Windows 10   Google Chrome
        回复
        @夕格树洞

        好像有个博主写了个ty字体的插件,不过我没弄。

        1. 头像
          夕格树洞
          Windows 10   Firefox
          回复
          @bosir

          我用了很好用

          1. 头像
            bosir 博主
            Android 12   手机微信
            回复
            @夕格树洞

            fontlibs 好像叫这个名字吧

    4. 头像
      Mr.Chou
      Windows 10   Microsoft Edge
      回复

      字体还能压缩,学到了..

      1. 头像
        bosir 博主
        Windows 10   Google Chrome
        回复
        @Mr.Chou

        可以的,不压缩的话,中文字体太大了,不利于加载。