什么是 @decktape/fonteditor-core
@decktape/fonteditor-core 是一个基于 JavaScript 的字体编辑器核心库，具备良好的兼容性，可在绝大多数浏览器上运行。该库包含了字体编辑相关的多种功能，例如：
- 显示字体信息
- 编辑字形
- 调整字符间距
- 添加、删除字形
- 导入、导出字体文件
本文将会介绍如何使用 @decktape/fonteditor-core 库，并且会提供一些使用示例。
安装
在命令行中使用 npm 进行安装：
--- ------- ------ -------------------------
使用
引入库文件
使用 ES6 模块的方式引入 @decktape/fonteditor-core 库：
------ -------------- ---- ----------------------------
创建 FonteditorCore 实例
创建 FonteditorCore 实例，并传入一个用于渲染的 DOM 元素作为参数：
----- ---------- - --- ---------------- -- -------- --- -- -- ----- ------------------ -- ---------- ----------- ----- -- --------- ------ ---- ------- ---- ---
加载字体文件
使用 setFont 方法加载字体文件：
----- -------- - --------------------- -----------------------------
显示字体信息
可以通过 setInfo 方法设置字体的一些基本信息显示在编辑器的信息栏中：
----- -------- - - ----------- --------- ---------- --------- --------- ------- -------- --------------- ---------------- -- -----------------------------
编辑字形
编辑轮廓
使用 editShape 方法进入编辑轮廓模式：
-- -------- ----------------------- -- ------------ -- --- -- -------- --------------------------
移动点
使用 movePoints 方法可对编辑中的点进行移动：
----- ------ - --- -- -- --- ----- ------ - ---- ---- ----------------------------- --------
添加、删除字形
将新字形添加到当前编辑中的字体：
----- ----- - - ----- ---- -------- ------- ------------- ---- ---------------- -- ----------------- ---- -- --------------------------
从当前编辑中的字体中删除指定的字形：
---------------------------
调整字符间距
使用 adjustKerning 方法可调整指定字符间的间距：
----- ----------- - - ----- ---- ------ ---- ------ -- -- --------------------------------------
导入、导出字体文件
导入字体文件
使用 importFonts 方法导入字体文件：
----- -------- - --------------------- -------------------------------- - ------- ----- ---
导出字体文件
使用 export 方法导出字体文件：
----- -------- - -------------------- ---------------------- ------------
示例代码
------ -------------- ---- ---------------------------- ----- ---------- - --- ---------------- ----- ------------------ ----------- ----- ------ ---- ------- ---- --- ----- -------- - --------------------- ----- -------- - - ----------- --------- ---------- --------- --------- ------- -------- --------------- ---------------- -- ----------------------------- ----------------------------- ----------------------- -- --- ---- ----- ------ ---- --- -------------------------- ----- -------- - - ----- ---- -------- ------- ------------- ---- ---------------- -- ----------------- ---- -- ----------------------------- --------------------------- ----- ----------- - - ----- ---- ------ ---- ------ -- -- -------------------------------------- ----- -------- - --------------------- -------------------------------- - ------- ----- --- ----- -------------- - -------------------- ---------------------------- ---------------------- -------- -------------------- - -- --- ------ ---- ---- ---- --- -- - -------- -------------------- - -- --- ------ ---- ---- ---- --- -- - -------- ------------------ --------- - ----- --- - ----------------------- -------------- ----- ---- - ---------------------------- --------- - ---- ----------------------------- ---------- -------------------------------- ------------- -------------------------------- -
结语
到这里，我们已经全面掌握了 @decktape/fonteditor-core 的基本使用方法和功能。希望这篇文章对你有所帮助，让你可以更好地使用和了解这个优秀的字体编辑器核心库。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005626281e8991b448dfaaa