什么是 @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