【FlutterBlog】如何给字体文件瘦身

8K吃萝卜
1,282 阅读2分钟

0x01 背景

最近在用Flutter web重构自己原本Vue的博客，发现Flutter web在加载中文的时候如果不设定字体，在web上面体验会很不好，先出现XXX然后才会出现汉字，就像这个样子：

image.png 本文就是讲如何解决这个问题。

0x02 引入本地字体

  • 首先先到GoogleFonts这个网站下载心仪的字体

  • 然后把字体导入assets目录下

    WechatIMG350.png

  • 接下来在pubspec.yaml文件中配置字体目录

    WechatIMG351.png

  • 最后在布局中使用字体就可以了

    WechatIMG352.png

0x03 对字体文件进行剪裁

在使用字体的时候发现，导入的字体体积大约10M，对于Flutter web来说，会导致页面加载速度变得很慢。

WechatIMG353.png

大多数时候我们只需要一些特定的文字即可，是不需要把所有的汉字全部导入进去的，所以我们只要把我们需要的文字剪裁出来即可。

  • 第一步，打开在线字体编辑网站FontEditor

    WechatIMG354.png

  • 第二步，创建一个项目用来保存剪裁后的字体，然后把字体文件拖入页面，点击保存项目，这样在项目目录里面就存在了两个项目，一个是我们新建的空项目用来存放剪裁后的字体，一个是导入的完整字体项目

    WechatIMG362.png

  • 第三步，打开原始字体项目的预览，选择ttf预览，可以打开一个新的预览网页，不要关闭这个网页

    WechatIMG363.png

  • 第四步，在预览网页中搜索你需要的字体，然后复制他的Unicode

    WechatIMG357.png

    或者也可以去Unicode编码转换 - 站长工具查询文字的Unicode码，然后把\u修改为uni。

    WechatIMG358.png

  • 第五步，得到Unicode之后，在字体编辑器里面搜索

    WechatIMG359.png

    WechatIMG360.png

  • 第六步，复制粘贴到第二个项目中，保存项目，然后重复此操作直到完成所有字的提取

    WechatIMG361.png

  • 第七步，点击TTF按钮生成.ttf字体文件下载到本地

    WechatIMG364.png

0x04 剪裁效果展示

  • 两个字体全大小一共10M左右，剪裁之后两个字体一共小于60k

    WechatIMG366.png

  • 显示特定剪裁文字，没有问题

    WechatIMG367.png

0x05 彩蛋

  • 修改导出字体的名字：可以在导出项目前查看字体信息

    WechatIMG368.png

    然后直接修改即可

    WechatIMG369.png

  • Android Studio中有自动检查拼写的功能，如果一些词语无法通过拼写检查的话(公司名字或者一些特定简写或者拼音)，就会在单词下出现下波浪线，看的人很不爽

    WechatIMG370.png

    这个可以双击Shift键，然后输入spelling，把特点词语添加进去

    WechatIMG371.png

    WechatIMG376.png

    然后下波浪线就会消失了

    WechatIMG372.png

avatar
文章
阅读
粉丝