CSS秘密花园: 连体字母

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

CSS Secrets》是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。

CSS Secrets

和人一样,不是所有的字形放在一起的时候都可以显得很自然。例如,对于大多数衬线字体的fi而言。字母i上边的小点经常和f中的横线重叠,使得它们的组合看起来非常笨拙。

连体字母

为了解决这个问题,类型设计师经常会在他们的字体中添加额外的字符,称为连字符。这些都是单独设计的字形的二联体或三联体,用于排版方案中当对应的字符彼此相邻时。例如,如上图中的一些常见的连体字母,它们看起来比之前对应字符单独放在一起的时候好了很多。

还有一些所谓的自由连体字“discretionary ligatures”:

连体字母

事实上,对于不起眼的&符号,我们都知道并且喜欢把它作为字母e和字母t的连写(“et”在拉丁文中表示“and”)。

它被设计成一个另类的风格,而不是因为它们的等价字符对相邻时出了问题。

但是,浏览器从来不会默认使用自由连体字(尽管这是正确的),并往往不会使用常见的连字体(这是一个bug)。事实上,直到最近,显式使用任何连写字的唯一方法就是使用它的等效Unicode字符——如,fi表示fi连写。这种方法比解决问题带来了更大的麻烦:

  • 很明显,它使得这些标签很难被阅读,也很难编写(能知道define是什么意思纯属运气)。
  • 如果当前字体不包含这个连写字符,结果将是乱七八糟的(如下图所示)。
  • 不是每个连写字都有一个等同的、标准的Unicode字符。例如,ct连写字不对应任何的Unicode字符,所有包括它的字体都需要把它放置在Unicode PUA(私人使用区域)块中。
  • 它会打破文本的可访问性,如复制/粘贴,搜索,和语音转换。很多应用都可以非常智能地处理这些,都不是所有都可以。它甚至可以打破一些浏览器的搜索。

连体字母

所以,在这种时候,总需要一个更好的方法,对吧?

解决方案

CSS3的中,font-variant可以被转换成shorthand,包含了很多新的longhand属性。其中之一是font-variant-ligatures,特别为连写的开启和关闭而设计的。要打开所有可能的连写字,你需要使用三个标识符:

font-variant-ligatures: common-ligatures
                        discretionary-ligatures
                        historical-ligatures;

该属性是可继承的。你可能会发现自由连体字“discretionary ligatures”妨碍可读性,想要把它们关掉。在这种情况下,你可能希望只打开常用的连写字:

font-variant-ligatures: common-ligatures;

你甚至可以明确地把其它两种连写字关闭:

font-variant-ligatures: common-ligatures
                        no-discretionary-ligatures
                        no-historical-ligatures;

font-variant-ligatures还接受none值,就是完全把连写字关闭。不要使用none值,除非你知道自己设置的是什么。要把font-variant-ligatures重置为初始值,你需要使用normal,而不是none

如需转载,烦请注明出处:http://www.w3cplus.com/css3/css-secrets/ligatures.htmlThis Weekend's Hottest Sneaker Releases (And Where to Find Them)

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css-secrets/ligatures.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部