转载 

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

分类:前端,java    894人阅读    IT小君  2024-04-21 09:33

工具已实现(python),地址:https://yy123.ink/tools/TTFCompression

需求:

项目开发中,遇到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;
    /**
     * 功能描述: 

     * 〈将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>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body{ font-size: 30px;}
@font-face {
  font-family: "SourceHanBold";
  src:url('syst-b.ttf') format('truetype');
}
.SourceHanBold{
  font-family: "SourceHanBold","PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei";
}
@font-face {
  font-family: "SourceHanRegular";
  src:url('syst-r.ttf') format('truetype');
}
.SourceHanRegular{
  font-family: "SourceHanRegular","PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei";
}
</style>
<body>
  
  <h3>引用思源宋体Bold:</h3>
  <div class="SourceHanBold">
    <p>您还没有获得过奖品哦~0123456789获得4分找到个可参与抽奖哦~恭喜您可参与抽奖活动 抽中 很遗憾,奖品擦肩而过</p>
    <p style="color: red;">压缩字体后加的字</p>
  </div>
  <h3>引用思源宋体Regular:</h3>
  <div class="SourceHanRegular">
    <p>请输入您的名字 请输入认证手机号18888</p>
    <p style="color: red;">压缩字体后加的字</p>
  </div>
  
</body>
</html>

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

font-spider ./index.html
点击广告,支持我们为你提供更好的服务

有机水果蔬菜HTML5网站模板

小众时尚单品在线电子商务网站模板

html5 canvas进度条圆环图表统计动画特效

html5图标下拉搜索框自动匹配代码

网页设计开发公司网站模板

html5 svg夜空中星星流星动画场景特效

响应式太阳能能源公司网站模板

css+js实现的颜色渐变数字时钟动画特效

中小型创意设计服务公司网站模板

HTML5数字产品服务公司网站模板

jQuery右端悬浮带返回顶部特效

HTML5 Canvas竖直流动线条背景动画特效

js+css3抽奖转盘旋转点餐代码

现代时尚家具公司网站模板

css鼠标跟随文字模糊特效

canvas炫酷鼠标移动文字粒子特效

HTML5现代家居装潢公司网站模板

响应式咖啡饮品宣传网站模板

响应式时尚单品在线商城网站模板

html5 canvas彩色碎片组合球形旋转动画特效

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务