什么是 @decktape/fonteditor-core
@decktape/fonteditor-core 是一个基于 JavaScript 的字体编辑器核心库，具备良好的兼容性，可在绝大多数浏览器上运行。该库包含了字体编辑相关的多种功能，例如：
- 显示字体信息
- 编辑字形
- 调整字符间距
- 添加、删除字形
- 导入、导出字体文件
本文将会介绍如何使用 @decktape/fonteditor-core 库，并且会提供一些使用示例。
安装
在命令行中使用 npm 进行安装：
npm install --save @decktape/fonteditor-core
使用
引入库文件
使用 ES6 模块的方式引入 @decktape/fonteditor-core 库：
import FonteditorCore from '@decktape/fonteditor-core';
创建 FonteditorCore 实例
创建 FonteditorCore 实例，并传入一个用于渲染的 DOM 元素作为参数：
-- -------------------- ---- ------- ----- ---------- - --- ---------------- -- -------- --- -- -- ----- ------------------ -- ---------- ----------- ----- -- --------- ------ ---- ------- ---- ---
加载字体文件
使用 setFont 方法加载字体文件：
const fontData = getFontDataSomehow(); fonteditor.setFont(fontData);
显示字体信息
可以通过 setInfo 方法设置字体的一些基本信息显示在编辑器的信息栏中：
const fontInfo = {
familyName: 'MyFont',
styleName: 'Normal',
fullName: 'MyFont Normal',
postscriptName: 'MyFont-Normal',
};
fonteditor.setInfo(fontInfo);编辑字形
编辑轮廓
使用 editShape 方法进入编辑轮廓模式：
// 进入编辑轮廓模式 fonteditor.editShape(); // 在编辑器中对字形进行编辑 // ... // 退出编辑轮廓模式 fonteditor.previewShape();
移动点
使用 movePoints 方法可对编辑中的点进行移动：
const points = [0, 1, 2, 3]; const offset = [10, 20]; fonteditor.movePoints(points, offset);
添加、删除字形
将新字形添加到当前编辑中的字体：
const glyph = {
name: 'A',
unicode: '0041',
advanceWidth: 600,
leftSideBearing: 0,
rightSideBearing: 100,
};
fonteditor.addGlyf(glyph);从当前编辑中的字体中删除指定的字形：
fonteditor.removeGlyf('B');调整字符间距
使用 adjustKerning 方法可调整指定字符间的间距：
const kerningPair = { left: 'A', right: 'V', value: 50 };
fonteditor.adjustKerning(kerningPair);导入、导出字体文件
导入字体文件
使用 importFonts 方法导入字体文件：
const fileData = getFileDataSomehow();
fonteditor.importFonts(fileData, {
base64: true,
});导出字体文件
使用 export 方法导出字体文件：
const fontData = fonteditor.export(); downloadFile(fontData, 'font.ttf');
示例代码
-- -------------------- ---- ------- ------ -------------- ---- ---------------------------- ----- ---------- - --- ---------------- ----- ------------------ ----------- ----- ------ ---- ------- ---- --- ----- -------- - --------------------- ----- -------- - - ----------- --------- ---------- --------- --------- ------- -------- --------------- ---------------- -- ----------------------------- ----------------------------- ----------------------- -- --- ---- ----- ------ ---- --- -------------------------- ----- -------- - - ----- ---- -------- ------- ------------- ---- ---------------- -- ----------------- ---- -- ----------------------------- --------------------------- ----- ----------- - - ----- ---- ------ ---- ------ -- -- -------------------------------------- ----- -------- - --------------------- -------------------------------- - ------- ----- --- ----- -------------- - -------------------- ---------------------------- ---------------------- -------- -------------------- - -- --- ------ ---- ---- ---- --- -- - -------- -------------------- - -- --- ------ ---- ---- ---- --- -- - -------- ------------------ --------- - ----- --- - ----------------------- -------------- ----- ---- - ---------------------------- --------- - ---- ----------------------------- ---------- -------------------------------- ------------- -------------------------------- -
结语
到这里，我们已经全面掌握了 @decktape/fonteditor-core 的基本使用方法和功能。希望这篇文章对你有所帮助，让你可以更好地使用和了解这个优秀的字体编辑器核心库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626281e8991b448dfaaa