FontEditor简介

FontEditor是一款在线字体编辑器软件, 能够打开本地或者远程的ttf|woff|woff2|eot|otf格式的字体文件, 能够导入和导出ttf|woff|woff2|eot|svg|otf格式的字体文件, 提供字形的编辑和轮廓编辑功能,提供字体的实时预览功能。

FontEditor支持的浏览器:chrome,safari,firefox,IE10+(仅能预览)

字形信息

一个ttf字体文件包含多个字形,单个字形包含以下信息:

  1. 字形轮廓,单个轮廓由线段和二次贝塞尔曲线组成,多个轮廓组成一个字形。
  2. unicode,码元,一个字形可以对应多个unicode码元,但一个unicode码元只能对应一个字形
  3. name,字形名称
  4. fullName,字体唯一标识,生成svg字体的时候作为`fontId`使用
  5. leftSideBearing,左边距,字形左侧的留白
  6. rightSideBearing,右边距,字形右侧的留白

字体信息

字体信息包含字体的family,subfamily,version等信息,可以在`设置`->`字体信息`中设置相关的项目。

常用的字体信息包括以下几个:

  1. fontFamily,字体家族,如:arial, Microsoft Yahei
  2. fontSubFamily,子字体家族,如:bold, bold-italic
  3. version,字体版本
  4. unitsPerEm,em框大小,em框越大字体越精细
  5. lowestRecPPEM,最小可读尺寸,字体最小可辨认的大小(像素)

字体度量

在字体显示或印刷时需要参考字体度量信息来排版文字。通过设置上升、下降、行间距来调整文字垂直方向的距离。

设置上标、下标、删除线可以调整上标、下标、删除线的位置和样式。

其他设置请参考[OS/2]。

`设置`->`字体度量`中设置相关的项目。

新建|打开 ttf字体文件

点击`新建`按钮,创建新的项目,点击`打开`按钮打开ttf|woff|woff2|otf格式字体文件,(注:暂不支持otf字体编辑和生成,打开otf字体后会自动转换成ttf字体)。

点击`保存项目`按钮,保存当前项目。

点击左侧`项目列表`打开保存的项目。

点击左侧选中项目中的`另存为`按钮,保存项目副本。

点击左侧选中项目中的`删除`按钮,删除当前项目。

导出|预览 字体文件

点击`导出ttf`按钮,导出ttf格式文件。

点击`导出woff`按钮,导出woff格式文件。

点击`导出woff2`按钮,导出woff2格式文件。

点击`导出zip`按钮,导出包含ttf|woff|woff2|svg|eot文件的压缩包。

点击`预览`按钮,预览当前正在编辑的项目,chrome仅支持预览ttf|woff|woff2格式字体,safari支持预览svg字体,IE10+支持预览eot字体。

注意:FontEditor为纯前端字体编辑器,处理字形个数超过3000个的项目时会超出脚本执行时间,导致导出失败,因此需要注意编辑超多字形时,请使用FontCreator等桌面软件。

同步字体文件

在主面板工具栏中点击`同步字体`,打开同步字体对话框。

输入远程地址,推送地址,字体名称,选择需要同步的字体类型即可进行同步,勾选`自动同步`复选框则在保存项目的时候会自动同步字体到指定的地址。

点击`取消同步`按钮取消同步设置。

在项目列表中点击`同步`按钮可以手动同步当前字体。

其中:

远程地址:支持`FontEditor`同步协议的服务器地址,关于同步规则请参考如下示例:

推送地址:支持`FontEditor`推送协议的服务器地址,FontEditor不检查推送地址是否有效,如果推送不成功,请参考`

字体名称:需要同步的字体文件名,作为字体标识

字体类型:需要同步的字体类型,FontEditor会在同步时把指定类型的数据,发送给同步服务器。

编辑字形列表

选中字形

在主面板区域显示本字体项目的字形列表,列表上方的工具栏显示可以进行的操作。

字形列表第一个项目为`.notdef`缺失字形,如果排版过程中unicode没有对应的字形,则使用缺失字形替代,因此第一个字形为特殊字形,不能随意删除

点击单个字形可以选中单个字形,按住`shift`键点击单个字形增加选中范围,按住`ctrl`键点击单个字形选中或不选字形。

在主面板区域可以拖选字形,拖动过程中按住`shift`键增加选中的字形,按住`ctrl`键去除已选中的字形。

`esc`键取消选中的字形。

`delete`键删除选中的字形。

`←``→`,分别向左,向右移动选中的字形,这样可以对字形列表重新排序。

`ctrl+Z`,撤销对字形列表所做的更改。

`ctrl+Y`,恢复对字形列表所做的更改。

颜色为浅绿色的字形为复合字形,FontEditor编辑器暂不支持复合字形的编辑。

主面板工具栏

在主面板上方的工具栏中可以对选中的字形进行操作。

点击`调整位置`按钮打开调整位置对话框,对字形的左边距、右边距、基线偏移进行设置,如果没有选中的字形,则默认操作所有字形。

点击`调整字形`按钮打开调整字形对话框,

选中`镜像`,`翻转`,对字形进行`镜像`,`翻转`设置;填写`按比例缩放`对字形按比例进行缩放;

填写`缩放字形到上下边界`对字形调整上下边界(此处设置可以调整字形到统一高度,在字形高度需要调整到一致时可以使用);

如果没有选中的字形,则默认操作所有字形。

点击`查找字形`按钮,打开查找字形对话框,输入要查找的unicode,查找后,会选中找到的字形。

点击`设置代码点`按钮,打开设置代码点对话框,可以设置起始代码点为`ascii`或者`unicode private data`开头的unicode码,

选中的字形会自动填充unicode代码点和字形名称,如果没有选中的字形,则默认操作所有字形。

导入字形

FontEditor支持ttf|woff|woff2|svg|otf字体文件的导入,支持单个svg字形的导入。

导入字体文件

点击`导入`->`导入字体文件`按钮,从本地导入ttf|woff|woff2|otf字体文件,可以一次导入多个字体文件,如果文件较大的话,建议分批导入,导入的字形在主面板显示。

点击`导入`->`在线字体`按钮,从字体库中导入所需的字体。

点击`导入`->`字体URL`按钮,输入线上字体URL,可以导入线上字体。

导入svg字形

点击`导入`->`导入svg`按钮,可以导入本地svg文件,支持svg字体和svg格式字形,可一次导入多个svg文件。

FontEditor会对svg做字形转换,有些svg命令转换成轮廓会导致失真,需要导入后做调整。FontEditor会对常用的svg命令做转换处理,如果有不支持的命令,则需要手动调整字形。

导入图片

点击`导入`->`导入图片`按钮,可以导入本地图片。

点击`选择图片`按钮,打开需要导入的图片,图片应在适当大小,并且对比度比较高,否则导入处理会比较慢,或者效果不理想。

点击`从URL导入图片`按钮,输入图片URL按回车,导入在线图片。

图像面板左侧为图片分离出来的原始轮廓,右侧为拟合后的字形轮廓,右侧的轮廓为最终导入的字形轮廓。

点击右上角`适应窗口`对面板进行缩放适应窗口,点击`查看原图``查看轮廓`按钮,分别查看原图和轮廓。

预处理选项可以对图片进行简单的预处理。

点击`反转`按钮反转图像,拖动`高斯平滑`滑块对图像边界进行平滑处理,拖动`对比度`滑块调整图像对比度,点击`恢复`按钮恢复预处理。

轮廓选项可以对提取的轮廓进一步加工。

拖动`二值化阈值`滑块调整二值化后的轮廓,向左拖动减少细节,向右拖动增加细节,预设的阈值可以辅助筛选轮廓。 点击`平滑`按钮切换平滑或者线段拟合, 点击`消除杂点`按钮, 点击`消除孔洞`按钮消除二值化后的孔洞, 点击`膨胀`按钮膨胀轮廓,点击`腐蚀`按钮腐蚀轮廓,点击`恢复`恢复轮廓处理。

点击`确定`按钮确定导入轮廓。

从Adobe Illustrator导出字形

在Adobe Illustrator中编辑字形完毕之后,选择`存储为web和设备所用格式`,在导出选项中选择svg,勾选`转化为轮廓`,然后导出,这样导出的svg可以更好的被FontEditor识别。

注意:FontEditor导入字形默认会合并多个`path`为一个字形,若要设置一个`path`对应一个字形,在`设置`->`导入和导出`中取消`导入svg文件时合并成单个字形`勾选。

对于非`path`标签,如ellipse,polygon 在导入的时候合并为一个字形

编辑字形轮廓

进入编辑轮廓模式

在主面板,鼠标移动到要编辑的字形上面,右上角出现`编辑`图标,点击图标打开字形编辑器。

在主面板,按`F2`键,打开或关闭字形编辑器。

字形编辑器

在字形编辑器中,字形右侧的蓝线为`rightSideBearing`右边距线,拖动右边距线,设置字形的右边距。

在字形编辑器中,上边缘刻度线为水平刻度线,左边缘刻度线为垂直刻度线,刻度线单位为`point`。

在字形编辑器中,红色辅助线为测量线,从上到下依次为:

  1. `ascent`,所有字形的上边缘,原则上字形上边缘不超过`ascent`
  2. `capHeight`大写H高度
  3. `xHeight`小写x高度
  4. `baseline`基线,字形排版的基准线
  5. `descent`下边缘,所有字形的下边缘,原则上字形下边缘不超过`descent`

编辑字形

在字形编辑器中,点击轮廓选中要编辑的轮廓,按住`ctrl`键选中,不选轮廓。

在字形编辑器中,按`delete`键删除选中的轮廓。

在字形编辑器中,按`←``→``↑``↓`键左移、右移、上移、下移选中的轮廓。

在字形编辑器中,拖动选中的轮廓到指定的位置,拖动过程中出现的绿色线条为吸附线条,会将拖动的轮廓对齐到其他轮廓或`辅助线`。

若要设置吸附选项,点击`设置`->`编辑器`打开编辑器选项,设置吸附到网格线或者轮廓。

在字形编辑器中,按住`ctrl`+`alt`键,同时拖动轮廓,可复制选中的轮廓。

字形变换

在字形编辑器中,右键选中轮廓,点击`变换`中的项目,对轮廓做相应变换。

在字形编辑器中,拖动选择框上的8个小方框改变轮廓大小,按住`shift`拖动,改变轮廓形状。

在字形编辑器中,点击已选中的轮廓进入倾斜变换模式,拖动小方块,旋转和倾斜轮廓。

编辑单个轮廓

在字形编辑器中,双击单个轮廓,或选中轮廓,在工具栏中单击`点模式`按钮进入单个轮廓编辑模式。

拖动单个点改变轮廓形状。

右键打开轮廓点编辑菜单,可以进行如下操作:

点击`添加点`在当前点后面和下一个点前面插入一个轮廓上的点。

点击`删除点`删除当前点。

点击`在曲线上`设置当前的点在曲线上。

点击`远离曲线`设置当前的点远离曲线。

点击`作为开始点`设置当前的点作为曲线开始点。

字形编辑器工具栏

在字形编辑器中,点击`点模式`按钮,将选中的轮廓进入点模式编辑。

在字形编辑器中,点击`上移一层`按钮,将选中的轮廓上移一层。

在字形编辑器中,点击`下移一层`按钮,将选中的轮廓下移一层。

在字形编辑器中,点击`改变方向`按钮,改变选中的轮廓为顺时针或者逆时针。

在字形编辑器中,点击`左对齐`按钮,将选中的轮廓左侧对齐到左边距。

在字形编辑器中,点击`居中对齐`按钮,将选中的轮廓中心对齐到左边距和右边距中间。

在字形编辑器中,点击`右对齐`按钮,将选中的轮廓右侧对齐到右边距。

在字形编辑器中,点击`顶端对齐`按钮,将选中的轮廓上侧对齐到字体上边缘。

在字形编辑器中,点击`居中对齐`按钮,将选中的轮廓中间对齐到字体上边缘和下边缘中间。

在字形编辑器中,点击`底端对齐`按钮,将选中的轮廓底部对齐到字体下边缘。

在字形编辑器中,点击`基线对齐`按钮,将选中的轮廓底部对齐到基线。

在字形编辑器中,点击`向左旋转`按钮,将选中的轮廓逆时针旋转90度。

在字形编辑器中,点击`向右旋转`按钮,将选中的轮廓顺时针旋转90度。

在字形编辑器中,点击`翻转`按钮,将选中的轮廓做翻转操作。

在字形编辑器中,点击`镜像`按钮,将选中的轮廓做镜像操作。

在字形编辑器中,点击`切割轮廓`按钮,进入切割轮廓模式,拖出切割线完成对轮廓的切割。

在字形编辑器中,点击`合并轮廓`按钮,合并选中的轮廓。

在字形编辑器中,点击`相交轮廓`按钮,将选中的轮廓取交集。

在字形编辑器中,点击`相切轮廓`按钮,将选中的轮廓取相切。

右键菜单

在字形编辑器中,右键空白区域打开右键菜单。

点击`添加路径`按钮进入添加路径模式。

点击`添加形状`按钮添加指定形状到字形中。

点击`字形信息`按钮打开字形信息对话框,可以对当前编辑的字形设置字形信息。

点击`重置缩放`按钮将形状缩放到视窗中央。

点击`保存`按钮保存当前形状到形状列表,保存之后的字形会以蓝色标识。

注意:保存形状到字形列表,不会保存当前项目,若要保存此次修改到本地,请点击顶部菜单`保存项目`或者点击字形列表任意区域后按`ctrl + S`保存项目。

在字形编辑器中,选择多个轮廓后右键,打开右键菜单。

点击`对齐形状`->`左对齐`按钮,对选中的轮廓对齐到左侧。

点击`对齐形状`->`居中对齐`按钮,水平对齐选中的轮廓。

点击`对齐形状`->`右对齐`按钮,对选中的轮廓对齐到右侧。

点击`对齐形状`->`顶部对齐`按钮,对选中的轮廓对齐到顶部。

点击`对齐形状`->`中间对齐`按钮,垂直对齐选中的轮廓。

点击`对齐形状`->`底部对齐`按钮,对选中的轮廓对齐到底部。

创建辅助线

在字形编辑器中,拖动上边缘和左边缘,会拖出水平、垂直参考线。

在字形编辑器中,右键空白区域,点击`添加参考线`创建水平和垂直参考线。

在字形编辑器中,右键选中的轮廓,点击`添加边界参考线`创建轮廓边界参考线。

导出字形

FontEditor支持将单个字形导出到png或者svg文件。

在字形编辑器中,选择字形后,点击`导出字形`按钮,打开导出字形对话框。

设置`字形颜色``字形大小`之后, 点击`下载SVG`导出svg格式文件, 点击`下载PNG`导出png格式文件。

查找字形

在主面板工具栏中,点击查找字形,打开查找字形对话框,默认`按代码点查找字形`,输入要查找的unicode,找到的字形会被选中,未找到字形,则不作任何改变。

选择`按名字查找字形`,输入字形名称,按名称查找到相应的字形,找到的字形会被选中,未找到字形,则不作任何改变。

选择`按字形序号查找字形`,输入字形序号,则找到的字形会被选中。

编辑器设置

点击`设置`->`编辑器设置`打开编辑器设置对话框

填写字体列表颜色、大小、个数,设置字体列表外观。

填写网格线以及度量线设置,改变网格线和度量线。

勾选`保存设置`,保存当前设置,若不勾选则仅对当前窗口有效。

点击`重置为默认设置`按钮,将设置重置为默认值。

点击`确定`按钮,设置生效。

快捷键

主面板快捷键

  1. `F2`,打开/关闭字形编辑器
  2. `F3`,预览ttf字体
  3. `F4`,预览woff字体
  4. `F6`,预览woff2字体
  5. `delete`,删除选中字形
  6. `ctrl + A`,全选字形
  7. `ctrl + C`,复制选中字形
  8. `ctrl + X`,剪切选中字形
  9. `ctrl + V`,粘贴选中字形
  10. `←`,在列表模式中,左移选中字形,在字形编辑模式中,编辑上一个字形
  11. `→`,在列表模式中,右移选中字形,在字形编辑模式中,编辑下一个字形
  12. `ctrl + Z`,撤销字形列表操作
  13. `ctrl + Y`,恢复字形列表操作
  14. `ctrl + S`,保存当前项目
  15. `ctrl + shift + S`,强制保存当前项目,同时保存正在编辑的字形和项目

字形编辑器快捷键

  1. `delete`,删除选中轮廓
  2. `ctrl + A`,全选轮廓
  3. `ctrl + C`,复制选中轮廓
  4. `ctrl + X`,剪切选中轮廓
  5. `ctrl + V`,粘贴选中轮廓
  6. `esc`,取消选中轮廓
  7. `ctrl + Z`,撤销轮廓操作
  8. `ctrl + Y`,撤销轮廓操作
  9. `ctrl + S`,保存当前字形到字形列表
  10. `双击轮廓`,进入轮廓编辑模式
  11. `ctrl + alt + 拖动`,复制选中轮廓
  12. `ctrl + 拖动`,沿X轴拖动选中轮廓
  13. `alt + 拖动`,沿Y轴拖动选中轮廓
  14. `ctrl + 点击轮廓`,选择/不选轮廓
  15. `shift + 滚轮`,水平移动字形
  16. `滚轮`,垂直移动字形
  17. `space + 拖动`,移动字形
  18. `ctrl|alt + 滚轮`,缩放视窗
  19. `ctrl|alt + '+'`,放大视窗
  20. `ctrl|alt + '-'`,缩小视窗

相关文档

  1. TrueType™ Reference Manual
  2. OpenType specification
  3. The Font Engine
  4. SVG Font

感谢

  1. fontello/svg2ttf
  2. fontello/ttf2eot
  3. ynakajima/ttf.js
  4. ecomfe/zrender
  5. fontforge/fontforge
  6. Itseez/opencv
  7. GraphicsGems
  8. AlloyTeam/AlloyImage