使用 Opentype.js 生成字体子集的实例代码详解

2023-07-24 07:05:03 72

字体子集是将字体文件中部分多余的字符删除，来减小文件大小，从而在Web端使用或嵌入到其他应用或系统中，在网上可以找到不少这方面的工具。

Opentype.js是一套可以支持浏览器环境和Node.js环境的开源OpenType字体读写库，利用这个库可以很轻松实现浏览器环境和Node.js环境的字体子集功能。

在浏览器环境创建字体子集工具

首先创建一个简单的HTML界面，包括一个选取字体文件按钮，一个输入框用于输入保留的字符，和一个保存下载按钮。

HTML





FontSubset



Chooseafontfile:



Text:

在HTML的前引入opentype.js，并加入Javascript。

在Node.js环境创建字体子集工具

创建项目文件

在Node.js版的项目中，可以考虑通过配置文件来实现批量处理多个字体文件功能。

mkdirfont_subset
cdfont_subset
npminit

项目结构如下，把所有原始的字体保存在src目录下，子集化之后的字体保存在dist目录下，main.js为主脚本。

font_subset
├──config.json
├──dist
├──main.js
├──node_modules
├──package-lock.json
├──package.json
└──src
└──NotoSerifSC-Bold.otf

字体配置

修改“config.json”文件。fonts数组类型，可配置多个字体文件；texts字符串类型，输入需要保留的字符，字符可以重复，可包含空格，不可换行，英文双引号使用\"表示。

{
"fonts":["./src/NotoSerifSC-Bold.otf"],
"texts":"0123456789:"
}

生成字体

main.js内容如下。

constconfig=require('./config.json');
constfonts=config.fonts;
consttexts=config.texts;

constpath=require('path');
constopentype=require('opentype.js');

constglyphs=[...newSet(texts.split(''))].join('');

fonts.forEach(item=>{
constfont=opentype.loadSync(item);
constpostScriptName=font.getEnglishName('postScriptName');
constdist=path.join(
'dist',
postScriptName.replace(/-/g,'_').toLowerCase()+'_subset.otf'
);
const[familyName,styleName]=postScriptName.split('-');

constnotdefGlyph=font.glyphs.get(0);
notdefGlyph.name='.notdef';
constsubGlyphs=[notdefGlyph].concat(font.stringToGlyphs(glyphs));

constsubsetFont=newopentype.Font({
familyName:familyName,
styleName:styleName,
unitsPerEm:font.unitsPerEm,
ascender:font.ascender,
descender:font.descender,
designer:font.getEnglishName('designer'),
designerURL:font.getEnglishName('designerURL'),
manufacturer:font.getEnglishName('manufacturer'),
manufacturerURL:font.getEnglishName('manufacturerURL'),
license:font.getEnglishName('license'),
licenseURL:font.getEnglishName('licenseURL'),
version:font.getEnglishName('version'),
description:font.getEnglishName('description'),
copyright:'Thisisasubsetfontof'+postScriptName+'.'+font.getEnglishName('copyright'),
trademark:font.getEnglishName('trademark'),
glyphs:subGlyphs
});

subsetFont.download(dist);
});

打开终端项目所在目录，输入以下命令，字体保存到“dist”文件夹下。

nodemain.js

总结

到此这篇关于使用Opentype.js生成字体子集的实例代码详解的文章就介绍到这了,更多相关Opentype.js字体子集内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

使用 Opentype.js 生成字体子集的实例代码详解

热门推荐

随机推荐