FontCreator · 2022年6月14日 0

FontCreator中连字 (Liga) 的制作

一、什么是Liga连字

连字是在字体设计当中十分重要的一个环节。尤其是在英文字体中更是如此。英文的电脑字体通常会在多个字之间存在连笔的现象。比如,输入“fi”后在不同设置状态下渲染的效果。



0.png

在Times New Roman字体下,左侧为一般字形,右侧为斜体。其中第二行为启用了OpenType渲染了连字后的字形


此外还有假名、谚文也存在这种现象。


1.png

思源宋体中使用连字的一些假名(假名+u3099/u309A)


而在中文字体中,也可以使用Liga连字来达到一定的目的。比如在思源宋体和思源黑体的旧版中,就是使用Liga连字来一些当时未入U的汉字的显示。


2.png

旧版思源宋体中使用连字显示的biáng(⿺辶⿳穴⿰月⿰⿲⿱幺長⿱言馬⿱幺長刂心)

二、FontCreator中连字的实现

如何实现连字效果?我将以下图中的文字为例讲述实现过程。



3.png

⿰⿱上示籴 – Hulenkius Venn

1. 首先,在字体中新建一个字形(Insert glyphs)。



4.png

Insert glyphs按钮




1.png

在菜单中开启Insert glyphs


使用By name(插入一个被命名的字符)或By number(插入若干个字符)均可。但是以By number方式插入的字符要记得修改或牢记字形的Name属性。比如我选择重新命名这个字形。


1.png

我修改字符名称为“hulenkiuslogo”以方便记忆

2. 绘制该新增的字形

在字体设计窗体中绘制你想要显示的效果。



1.png

绘制出该字形




1.png

缩略图

3. 构思

构思让哪些字符连续出现时显示为该字形。比如我希望“⿰⿱上示籴”这五个字符连续时,自动渲染为该字形。这很重要。构思完成后,确认这些字符已经被插入到字体当中。如果字体工程文件中不存在这些字符,点击“Insert characters”插入他们。比如,我需要确认“⿰”(u2FF0)“⿱”(u2FF1)“上”(u4E0A)“示”(u793A)“籴”(u7C74)已经被插入在字体中。



1.png

确保这些字符已被插入,并且记住他们的名称(Name)

4. 编辑OpenType 脚本

(1) 开启OpenType Designer窗体



1.png

OpenType Designer按钮




1.png

在菜单中开启OpenType Designer




1.png

OpenType Designer窗体界面

(2) 添加脚本

选中“Scripts”,点击“+”号。
选择默认脚本(Default script),点击“Finish”。
选中“Default”,点击“+”号。
选择“Standard ligatures (liga)”,点击“Next”。
选中“StandardLigatures1 (liga)”,点击“+”号。
选中“Ligature substitution”,点击“Next”。



1.png

选中“Scripts”,点击“+”号




1.png

选择默认脚本(Default script),点击“Finish”




1.png

选中“Default”,点击“+”号




1.png

选择“Standard ligatures (liga)”,点击“Next”




1.png

选中“StandardLigatures1 (liga)”,点击“+”号




1.png

选中“Ligature substitution”,点击“Next”

(3) 编辑脚本

点击“+”号,添加连字方案。
忽视“Input”列,选择“Output”列中的目标字形,点击“OK”(右侧显示的文字是字形的名称)。
清空这里的“Input”右侧文本框中的内容。
点击右侧“+”号。
选中构思出的方案中的第一个字符,点击“OK”。
按顺序将其余的字符加入。
删去前缀的“.notdef ”。
删除后上方窗口显示的效果。
下方可以查看效果,无误后点击“Apply”和“OK”。



1.png

点击“+”号,添加连字方案




1.png

忽视“Input”列,选择“Output”列中的目标字形,点击“OK”(右侧显示的文字是字形的名称)




1.png

清空这里的“Input”右侧文本框中的内容




1.png

点击右侧“+”号




1.png

选中构思出的方案中的第一个字符,点击“OK”




1.png

按顺序将其余的字符加入




1.png

删去前缀的“.notdef ”




1.png

删除后上方窗口显示的效果




1.png

下方可以查看效果,无误后点击“Apply”和“OK”

(4) 测试效果



1.png

测试效果

原文首发于“⿰⿱上示籴 - Hulenkius   遠見齋|悟言一室
原文链接:点击跳转
原文作者系本人