转载  使用 font-spider(字蛛)及sfnttool.jar 压缩 ttf字体 以及在线字体压缩功能实现

分类:前端,java 2022-07-13 19:35    363人阅读   

需求:

项目开发中,遇到ttf字体过大,需要按照使用到的文字进行裁剪,从而减少字体包的大小。

使用场景:web前端 ,cocos creator , java

方案一:java中使用sfnttool.jar 抽取指定中文字符串ttf文件

一、准备java运行环境,并下载sfnttool.jar文件
链接: https://pan.baidu.com/s/17IOWBq5C2ta2Z1tPzrkuVA 提取码: hxcm
二、运行命令

java -jar sfnttool.jar文件路径 -s '字体内容' 原始ttf文件路径 裁剪后ttf文件路径

三、最终生成裁剪后的ttf文件。

发散,使用sfnttool.jar实现,在线文字压缩功能,代码如下

package sample;

import com.google.typography.font.tools.sfnttool.SfntTool;

import java.io.File;
import java.io.IOException;

/**
 * @author: Administrator
 * @date: 2021/03/13 21:37
 * @description:
 */
public class FontMakeUtil {
    static File file = null;
    /**
     * 功能描述: <br>
     * 〈将words字符串中字符创建为一个字库,fileSrc为完整字库绝对路径,fileDes为精简字库绝对路径〉
     * @Param: [words, fileSrc, fileDes]
     * @Return: void
     * @Author: Administrator
     * @Date: 2021/03/15 21:24
     */
    public static void convertToSmallFontFile(String words,String fileSrc,String fileDes) {
        boolean isExist = (file = new File(fileDes)).exists();
        if(isExist){
            file.delete();
        }
        String[] args = new String[4];
        args[0] = "-s";
        args[1] = words;
        args[2] = fileSrc;
        args[3] = fileDes;
        try {
            SfntTool.main(args);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

   //测试
   public static void fontConvert(String words){
        String fileSrc = getBasicFilePath()+File.separator+"msyh.ttf";
        File file = new File(fileDes);
        if(file.exists()){
            file.delete();
        }
        FontMakeUtil.convertToSmallFontFile(words, fileSrc, fileDes);
    }

}

方案二:利用nodeJs插件font-spider,抽取指定中文字符串ttf文件

一、安装nodeJs运行环境,并下载安装字蛛font-spider
npm install font-spider -g

二、使用方法
1.创建font.css,引入需要用到的字体,定义好font-famaily,并在下方定义好需要用到的id名,方便后面改变字体直接使用

font.css

@font-face {
    font-family: 'kaiti';
    src: url('kaiti.ttf') format('truetype');
}
#txt{
    font-family: 'kaiti';
}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>文字过滤</title>
        <link rel="stylesheet" href="./css/font.css">
    </head>
    <body>
        <div id="txt">
            部首结构笔画数易错点书写要点::
        </div>
    </body>
</html>

三、终端输入命令,提取需要的字体

font-spider ./index.html
服务器费用不足...

移动端友好的新闻博客类HTML5模板

简约的Bootstrap5价格表小部件

程序员向妹子表白专用代码

通用的医院医疗保健HTML5模板

消息通知提示jQuery小部件

建筑工程机械设备租赁网站HTML模板 - Antek

墨汁跳跃闯关js小游戏源码

动画效果教育行业SVG画图和图标

CSS DIV中秋节网页代码

物品租赁买卖业务平台HTML5模板 - Doremi

CSS3 Button按钮悬停效果集合

纯css太阳系动画html源码

bootstrap框架web UI工具包后台模板 - MegaDin

bootstrap风格后台界面管理系统模板 - Voler

程序员向妹子表白专用代码

jQuery弹出提示框组件

很酷的元素周期表three.js动画

时尚和轻量设计Bootstrap4管理系统模板 - Sunny

时尚的社交网站前端界面HTML模板 - Cirkle

区块链数字货币管理系统网页模板 - Cryptio

服务器费用不足...
 工具推荐 更多»