图片 1

所谓前端,精一行需通十行。在技术和设计的交汇处,追寻前端价值所在。这里是《前端基础系列之字体初探》。

在博客园写博的半年中,我有时会纠结于一些诸如写作格式和显示效果之类的小问题。我想任何一个热衷于在这里写博客的人都可能会遇到类似的问题,所以就把自己遇到的一些状况和解决方法列出来,以便交流。

英文原文:Why I vertically align my code (and you should
too!)

0x00 基线

在西文字体中,基线指的是多数字母排列的基准线。

图片 2

图片 3

  • ascent: 上升线
    • ascender height: 上升高度
  • capital line: 大写字母顶格线
    • cap height: 大写字母高度
  • mean line: 也称为x-line,小写字母x的顶格线。
    • x-height: 小写字母x的高度
  • baseline:
    所有字母的基线、基础线,所有的大写和小写都基于这条线来进行排列
  • descent: 下降线
    • descender height: 下降高度

根据字体设计界的长期实践经验,基本上可以认为x-Height较高的字体相对而言,在文字的可读性上具有一定的优势。

东亚字体没有基线,每个字符坐落在一个方形盒子中,既无升部也无降部。

在博客园看到不少很绚的博客页面,我很想知道都是怎么实现的。:-)
希望大家不要客气,在评论区留下诀窍。谢谢!

上周在 HackerNews,关于 Linux Kernel
代码风格展开了有趣的讨论。

0x01 造型

基本可以分为6大类别:

  1. 衬线(Serif)
  2. 非衬线(Sanserif、san-serif、sans-serif、Sans)
  3. 黑体(Blackletter)
  4. 埃及体(Egyptienne)
  5. 手写体(Script)
  6. 等宽字体(Mono)

其中Serif和Sanserif是2个最大的类别,绝大多数的常用字体都是出自其中。

 

在讨论中,我就应不应该垂直对齐代码发起了一场小小的圣战。我完全支持!让我细说端详。

Serif

衬线(serif)就是笔画边缘的装饰部分。

图片 4

衬线设计的初衷是为了更清楚地标明笔触的末端,提高辨识率,提高阅读速度。另外,使用衬线字体会让人感觉更加的正统。所以我们常见的英文书籍,特别是论文、小说,很多都是使用衬线体来完成正文的。在中文里,我们使用的宋体就是对应的衬线字体。

编辑器

下面是博客园的编辑器界面:

图片 5

博客园编辑器界面

什么是垂直对齐?

Sanserif

字体如果不带衬线的话,那么就称为非衬线体或者无衬线体。

图片 6

1. 查询HTML

写一篇文章实际上是构建了一个HTML网页,内容和格式都最终保存在这个HTML网页中。如果格式上有什么不确定的地方,都可以查询和修改HTML本身。你可以通过下面的“HTML”按钮来查看:
图片 7

 

举个小例子:

Blackletter

这种字体盛行于中世纪,是当时手写本的主要用字体,具有浓郁的宗教色彩。从古罗马时代的文字发展到该时期,这类字体的笔画造型及书写方式等细节,已非常的样式化。由于样式严格,笔画又比较粗,导致页面黑度非常重,因此该类字体被称为Blackletter。

Lucida Blackletter:

图片 8

Horst Blackletter Demo:

图片 9

2. 插入代码

对于技术博客来说,代码插入是必不可少的一个环节。常规的博客编辑器通常都没有这个功能。博客园的插入代码算是比较齐全。值得注意的是“全部折叠”选项:

图片 10

如果代码过长,而文章的重心又不在于分析代码,那么可以勾选这个选项。代码会隐藏成一个”View
Code“的按钮,只有在点击之后才展开。这样,可以让读者专心于文章的脉络。读者快速浏览一遍之后,觉得还有兴趣的话,可以自行展开代码阅读,而不会在一开始的时候就被超长的代码吓走。

 

int robert_age = 32;
int annalouise_age = 25;
int bob_age = 250;
int dorothy_age = 56;

Egyptienne

该类字体又被称做Slabe字体。这类字体一般有着粗壮的呈直线的Serif,而且Serif和Stem的粗细比例非常小。这一类字体的特点是具有Serif字体的线脚,又有类似Sanserif的粗犷。不过名称与埃及毫无关联,据传第一款这类字体的创作者是在前往埃及的旅途设计了该字体。

FetteEgyptienne:

图片 11

Egyptienne Zierinitialien:

图片 12

3. 格式与字体

图片 13

格式

所谓的格式,实际上是html标签(tag)。比如,如果采用段落格式,那么内容就会被镶嵌在<p></p>的标签之间。再比如标题1,实际上是<h1>。你可以通过查询HTML源码来找出每种格式对应的标签。采用格式的好处是可以通过CSS来统一管理每一种标签所标示的内容。

 

图片 14

字体

最值得推荐的字体是Courier
New。它是等宽字体,每一个字符的宽度相同,所以上下两行很容易对齐,比如:

TomIDNumber =
10

VivIDNumber =
22

如果是非等宽字体,字符宽度根据字符形状发生变化,比如i会比较窄,而o会比较宽,所以上下两行很难对齐。比如Arial:

TomIDNumber
= 10

VivIDNumber
= 22

等宽字体是程序员的首选字体。

 

 

下面的代码更易于阅读:

Script

西方文字与中文汉字结构不同,但也有其自成一体的装饰书法形式,被称做Caligraphy,在很多古典的设计中被广泛采用,这些字体又被称为Carsive,是遵循了华丽的手写字体设计而成。不过,Script字体类不仅包括了这些传统而经典的手写字体,也涵盖了那些手写感觉却并不花哨的字体,以及那些极具个人风格而显得非常通俗大众的手写字体。所以简单的讲,Script类的最基本特征就是手写,而不一定局限于经典或随意。

图片 15

4. 关于颜色

每一个人都有自己的颜色喜好,有人会比较偏爱黑白的页面。但从认知心理学的角度来说,人们更容易阅读标出要点的段落和文字。特别是网络和电子阅读时代,彩色相对黑白没有额外的印刷成本,所以利用颜色标记值得一试。下划线、粗体斜体也是相同的道理。
(在黑白印刷时代,人们惯用这三种方式来区分重点。你甚至可以在机械打字机上见到它们)。用这些标记方式的时候,最好可以在每篇博文中保持统一。比如可以用粗体表示命令,用斜体标记引用,用红色表示重点。这样,人们连续阅读同一个博客的时候不会觉得混乱。

 

int robert_age     = 32;
int annalouise_age = 25;
int bob_age        = 250;
int dorothy_age    = 56;

Mono

等宽字体事实上只针对西文字体。因为英文字母的宽度各不相同。例如i就要比m窄很多。编程时显示代码,如果字母不等宽那么排版将很难看。

Ubuntu Mono:

图片 16

CSS定制

管理 -> 设置 ->
“通过CSS定制页面风”中,我们可以定制自己的CSS风格。这是很实用的功能。

 

我扫一眼就能看到”bob_age”有点儿不正常。我不用多费事,就轻松地看出来它们都是整数。

0x02 样式

1. 定制标签(tag)

在编辑器部分,我们看到所谓的格式实际上是HTML标签。这些标签可以通过CSS定制来统一管理和控制。比如我们想设置标题2的格式为:

 

图片 17

 

可以通过添加如下CSS实现:

图片 18

h2 {
  text-align: center;
  box-shadow: 10px 10px 5px #888888;
  background-color: #5FBDCE;
  color: #015666;
}

图片 19

 

 

  1. Image溢出和解决

图像溢出是个常见的问题。在一个小的屏幕或者浏览器中,图片的像素可能超出div的区域。比如:

 

图片 20

调整前

 

你可能会重新设定图片的大小。但是由于可能的读者所使用设备可能差别很大(比如手机和大屏幕),我们并没法预估所应设定的大小。

我们可以在CSS定制中选择img,然后使用overflow属性:

 

img {
  overflow: scroll;
}

 

这样,溢出的图像会被隐藏在滚动条中。

 

我采用了另一个方法:

img {
 max-width: 80%;
}

这样,img的宽度不会超过div宽度的80%。图片会根据情况调整大小。

 

图片 21

调整后

 

这条意见还没被广为分享,因此我打算解释一下,为什么很多人认为这是一种有用的风格指南。

字重

常见的字体的样式分为:正常Normal、粗体Bold、斜体Italic。优秀的字体会对不同的字重提供不同的设计。

字重名称 对应 CSS font-weight
light 100、200、300
regular 400
medium 500、normal
bold 600、700
black 800
ultra black 900

对于中文斜体,一般在网络上是不使用的。因为中文笔画繁多,使用了斜体将难以辨认。

定制公告、页首、页脚HTML

在管理 -> 设置中,这三者可以添加自己想要显示的HTML元素。比如在公告栏中我添加了微博的图片和豆瓣的Javascript(如上图)。你也可以增加其他更加个性化的东西。

微博:我的工具 -> 签名档 ->
获得代码,然后将代码复制到博客园的公告栏。

豆瓣:到下面网址,生成代码,然后将代码复制到博客园的公告栏。

 

原地址:
博客园小技巧

理解

字号

字号是区分文字的大小的一种衡量标准,国际上通用的是点制,在国内则是以号制为主,点制为辅。号制是采用互不成倍数的几种活字为标准的,根据加倍或减半的换算关系而自成系统,可以分为四号字系统、五号字系统、六号字系统等。字号的标称数越小,字形越大。

点制又称为磅制(P),是通过计算字的外形的“点”值为衡量标准。这里的“点’,不是计算机字形的“点阵”的意思,“点”是国际上计量字体大小的基本单位,从英文“Point’,译音而来,一般用小写‘p’来表示,俗称“磅”。字号的每一个点值的大小等于0.35mm,误差不得超过0.005mm。

图片 22

图片 23

90% 的编程工作是为了解决问题,剩下的 10% 的工作需要再用 90%
的时间用来理解问题是怎样被解决的。注1

0x03 间距

阅读代码和阅读散文,有着极大的不同。我们期望作者能够清晰地解释他们的语句,而不是用他们选中的语言过于冗长地说些不相干的东东,我们都期待普通的语法风格。

行距(Line-height、Leading)

指两个相邻的行之间,基线的距离。1.5倍行距是个很好的经验值。

的确,Kernel
代码风格着重强调了这一点。你选择变量命名的方式,和代码的用途一样重要。

字间距(Letter-spacing、Tracking)

指一组字母之间相互间隔的距离。字间距影响了一行或者一个段落的文字的密度。

考虑下面的代码:

字距调整(Kerning)

字距调整是一种因视觉需要而做的技术处理。比如当一个大写A后面跟随一个小写v的时候,两个字符间就会出现视觉上的更大的间距(实际上字间距是一样的),这是普通的字符间距所无法解决的。如果减少它们的间距,那么其他的字母就会连成一团。这时候就需要字距调整来处理了。

图片 24

var thinG=doIt (thestuff,MORE_sTuff); /* LOL! */

0x04 段落

即便你对代码库有深入理解,它也不是特别易读的代码行。

行长(Measure)

指一段文字的宽度。

图片 25

行长越长,需要的越大的行距。行距太小,读者阅读换行时容易串行。行距太大,读者阅读行时会感觉到文字不连续。正文中,每行40~70个字母为宜。

var totalBill = apply_tax (initialBill, taxRate);

对齐(Alignment)

段落的对齐基本有四种:

  • 左对齐(flush left)
  • 右对齐(flush right)
  • 居中对齐(centered)
  • 两端对齐(justified)

左对齐使文章左侧文字具有整齐的边缘。同时文字的右边就会不整齐。所以英文对左对齐也叫做ragged
right,意指外形参差不齐的右边。右对齐也类同。

在英文排版中,当行长很短的时候,使用两端对齐可能会照成某些行词间距过长,某些行词间距过短,这样参差不齐的词间距会感觉十分凌乱。

对于清晰的应用程序,要借助命名习惯、间隔和大写,从而让代码更易于阅读。这意味着,接手我们代码的可怜家伙,将用更少的时间来解密代码,把更多时间放在理解上面。

0x05 字库格式

常见的字库格式有:

  • TTF
  • OpenType
  • PostScript
  • TrueType

为什么使用等宽字体?

0x06 杂项

在所有著名的、老生常谈的舌战中,有两个实力基本相当的阵营,即等宽字体 注2VS
比例字体注3 的争论。

在线资源

  • 免费字体预览和下载:FONTS
  • 阿里妈妈中文webfont:iconfont
  • 中文字体压缩器,让网页自由引入中文字体成为可能:字蛛
  • 谷歌字体API:Google
    Fonts

某些异教徒会对你说,比例字体是最棒的——无视这些异教徒吧。另一些异教徒则在他们争论比例字体所具有的上等纯洁度时,给你的心灵留下了不和谐——这些可怜的、受谴责的灵魂呀。

相关书目

  • 《字体设计数问:知乎许瀚文自选集 (知乎「盐」系列)》
  • 《字体之美:从传统印刷到Web排版》
  • 《西文字体:字体的背景知识和使用方法》
  • 《西文字体的故事 (倒影)》

图片 26

Jam说的公众号

最终,还要归结到可读性。你觉得,什么东西能够最容易地帮助你理解代码?为什么
IDE
有着色方案——因此你能一眼看出“foo”是函数、常量、变量还是注释。只要能让你更快地理解这段代码的用途,它就是好的东西!

这也是电子表格如此受欢迎的原因之一。列提高了可读性。你可以快速地顺着一列扫视,并能注意到某行和其它行是否存在明显不同。

我们没有工具

有趣的是,在 HackerNews
上的讨论中,我面临的最大批评与垂直对齐是否有用无关,而是我们的工具有多么糟糕。

「这破坏了 diff
的可读性和可用性。比如你修改了某个常量,需要快速追踪因此引起的严重
bug。对于水平排列的代码,diff
或许包含了所有修改过的行,从而掩盖了关键修改。有一些忽视空格的变通方案,以及基于单词的
diff,不过依本人愚见,不值得这么麻烦。

——Andreas van
Cranenburgh

……还有……

假如你有 50
行赋值语句,你把所有值都和最大的那个对齐了,那么增加一个赋值语句,将迫使你更新
50
行代码。我已经遇到过这些情形了,每当那时候,我就明白了,不要那样对齐值是多么地重要。

——scrollaway

这些论点在某些语境中是合理的,但是说明了需要更好的工具。

我想起了 Elastic
Tabstops ——自动排列代码块的方法。

图片 27

By Nick Gravgaard

工具能够轻松容纳这种工作方式。计算机就是为我们做单调、重复工作的,CPU
周期「浪费」在让代码更可读方面的代价,已经足够便宜了。

在 Linux Kernel 中,还有大量的例子,垂直排列让代码更便于人类分析。

垂直排列不适用于每个场景,但是对于快速评估代码,其可读性是无与伦比的。

代码是具有创造性的平台,我们通过这个平台来表达想法。如果工具增加了理解这些想法的难度,那么,需要改变的就是工具、而非我们。


注释

  1. 90-90 法则(ninety-ninety rule,九九定律,99
    定律)是计算机编程和软件工程领域的一个有名的法则,出自于一句幽默的格言:(开发软件时)前
    90% 的代码要花费 90% 的开发时间,剩余的 10% 的代码要再花费 90%
    的开发时间。

  2. 等宽字体(Monospaced
    Font)是指字符宽度相同的电脑字体。与此相对,字符宽度不尽相同的电脑字体称为比例字体。在等宽字体中,字母i,j显得两侧余白较多,而字母w,m等
    的笔画显得相当拥挤。但是随着图形用户界面主流的更新和电脑技术的提高,处理比例字体的局限性得到了突破,因此现在排版上显得比较自然的比例字体的使用已
    经相当普及。另外,代码也经常使用等宽字体。

  3. 比例字体(Proportional
    Font)是指字符宽度不尽相同的电脑字体。与此相对,字符宽度相同的电脑字体称为等宽字体。

转自: