前端测试时经常会被问到的fi合字问题

合字 —— 一个被误认为Bug的Bug

spark1e ·

什么是合字(ligatures)?

在西方字体排印学中一般表示将多于一个字母的合成一个字形。如印刷品中常常将拉丁字母两个字母fi的i上一点常与f的一钩合并,而德语字母ß原为ss等等。 —— 维基百科

合字首先是服务于西方字体的印刷的,一般是由于两个字母的间距不易调大,此时两个字母存在易重叠的部分。早期电脑软件无法进行合字替换,但现在由于OpenType技术流行,合字逐渐恢复了使用。例如苹果设备最常见的PingFang SC。

合字比较常见的情况

有条件的同学可以在不同系统(如Mac和Win下对比看看)

CSS强制不合字

font-variant-ligatures: none;

font-variant-ligatures 还有很多有趣的值,可以参见MDN

当然,这个属性也需要参考其兼容性,Caniuse

还有一种另辟蹊径的办法,就是从成因来看,字符之间距离过近导致合字更适合打印,且美观,那么我拉长字符间距,也可以避免合字。

Dive In

哪个部分使合字生效?

首先得是OpenType渲染,其次,这个合字有对应的Unicode字符,所以此处涉及了一对多的转换。

哪些语言有合字?

根据维基百科,常见的有:

  • 拉丁文字
  • 丹麦语和挪威语
  • 法语
  • 德语
  • 冰岛语
  • 瑞典语

非拉丁语言的文字,如汉字和日文,虽然存在合字,如“招财进宝合体字biang”

另外值得注意的是,有一些计量单位也存在合字的情况,如“㎉”。

前端测试时经常会被问到的fi合字问题
本文作者
spark1e
发布于
2022-10-20
许可协议
转载或引用本文时请遵守许可协议,注明出处、不得用于商业用途!
评论区 - Powered by Giscus