本次更新的动力主要来自@Huang98同学,非常感谢Ta的意见。

此前在codepre标签的样式中,我采用了一种名叫futura pt condensed字体。该字体的设计特点是极为狭长,字重也特别突出。在上述两个标签中使用futura pt condensed的好处是能够对代码起到显而易见的强调作用。但这种字体的缺点和它的优点一样明显,即字体宽度过小,尤其是较中文而言。

我们知道,除非有特别设计,一般汉字都是典型的方块字。这意味着,汉字高度和宽度和高度不会出现巨大的差异。这就给我们的中英文混排工作带来了巨大的挑战。

在上述案例中,我们会遭遇一种尴尬,即相同字号的英文字母和汉字大小存在巨大差异。如果英文字体恰好合适,那么在纯中文和中英文混排的情形中,中文字体的尺寸就会过大。更令人烦恼的是,对于同一标签的字体属性,我们还没办法通过CSS来进行差异化渲染。虽然以前是听说过有种通过自动判定字符编码来进行中英文区别渲染的技能,但对我来说好像太高端了……

之前在写博文时,代买区块里主要出现的都是英文字母,因此也没多在意。今天听到@Huang98同学的吐槽,我也觉得futura pt condensed字体和思源黑体的搭配并不合适。因此,我最后又到Typekit字库里找了另一款叫做Rooney Sans的字体,其特点是宽高比例接近汉字,且具备从300-800的字重。如此一来,既能与汉字一同协调尺寸,又能通过使用字重较大的字体来起到强调作用。

本次更新的主要内容就是替换了codepre标签中的字体,并减小了字体尺寸。以下是几个案例:

纯英文字母

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Cum ceteris in veneratione tui montes, nascetur mus. Etiam habebis sem dicantur magna mollis euismod.             

纯汉字

露凉时、
零乱多少寒螀,
神京远,
惟有蓝桥路近。 

中英文混排

今天早上Mike推荐了我看DesiringClick上面一篇关于ColorSpace的文章。               

项目地址