npm 包 @decktape/fonteditor-core 使用教程

阅读时长 7 分钟读完

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

纠错
反馈