three.js 字体精简处理

文章目录

  • 工具介绍
    • Free TTF To SVG Coverter
    • fonts-streamline
  • 处理步骤
    • 下载常用中英文ttf字体
    • 将ttf字体转换成svg字体
    • 抽取svg字体文件
    • 将精简后的ttf字体转换成json
  • 使用示例

由于中英文字体文件太大,放在Web端,会占存储空间,影响加载数据,常见的做法就是从字体文件中抽取项目需要用到的文字,来达到精简字体文件的目的。

工具介绍

参考链接:精简ttf字体文件

Free TTF To SVG Coverter

three.js 字体精简处理_第1张图片

fonts-streamline

这是nodejs模块,可以自己通过node安装。

处理步骤

下载常用中英文ttf字体

下载地址
类似的网址还有很多,大家可自行搜索。

将ttf字体转换成svg字体

使用Free TTF To SVG Coverter将ttf字体转换成svg字体。
点击Add TTF(s),选择想要抽取的字体文件
three.js 字体精简处理_第2张图片
勾选字体,选择输出目录,点击转换,成功后状态会显示为完成;失败的话,需要更换字体文件了。
three.js 字体精简处理_第3张图片
得到svg格式的字体文件。
three.js 字体精简处理_第4张图片

抽取svg字体文件

安装fonts-streamline

npm install -g fonts-streamline

用法

// fonts-streamline "精简字符集abc123" 原svg字体文件路径 存放精简字体文件路径
fonts-streamline "精简字符集abc321" C:\Users\你的用户名\Desktop\仿宋_GB2312.svg C:\Users\你的用户名\Desktop\myfont.ttf

three.js 字体精简处理_第5张图片
得到抽取后的ttf字体文件
在这里插入图片描述

将精简后的ttf字体转换成json

在线转换链接:Facetype.js
three.js 字体精简处理_第6张图片
得到json格式的字体文件,就可以直接使用啦!

使用示例

官方文档

你可能感兴趣的:(Web3D,three.js)