浅谈网站字体的选择与优化

如同“想要抓住男人的心，首先要抓住男人的胃”一般，想要留住浏览者，首先站长本身就要注重网站页面的布局和其他细节优化。近期Packy也是在折腾自己的主题，看了一些前端设计的资料。今天，拿《 Responsive Typography: The Basics》一文的翻译和个人的见解来与大家分享一下：选择怎样的字体适合您的网站！

响应式布局

首先，我们要知道什么是响应式布局，因为原文标题就是“响应式字体排印”嘛~百度百科告诉我们，响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。也就是现在屏幕越来越大，移动设备越来越多，你需要选择一个好的字体和样式，来兼容这些所有的设备。

响应式布局最典型的2种就是

1. 自适应布局：分步地调整布局以适应有限种(屏幕)大小。
2. 流体布局：持续不断地调整布局以适应各种可能的宽度。

其中的第二种是目前比较火热的布局，因此 WordPress 上出现了很多瀑布流的主题。

到底是用以往的布局方式好还是响应式布局好呢，这个要根据每个网站的内容来决定啦。如果一个纯文字的网站用瀑布流来显示文章，浏览者永无止尽的看到一堆一堆的文字，必然会感到枯燥。

选择字体

制作一款主题或建设一个网站的时候，你终究要决定用什么字体来确立网站的基调。由于每种字体都有它自己的品质要求（或限制）特定的处理方法，字体的选择会带来诸多视觉和技术上的结果。现在字体成千上万，你有很多的字体可以选择，于是找到一种合适的字体又变成一项挑战。

对于中文的网站来说，似乎没必要纠结字体，因为真正能用的字体也就那么几个…但是，同样的，不同的网站需要的字体还是不同的，这就要引入下一个话题来了解了。

衬线还是无衬线？

好了，我们这里又要解释下神马是衬线和无衬线了。

西方国家字母体系分为两类：serif 以及 sans serif。

serif 是有衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。相反的，sans serif 就没有这些额外的装饰，而且笔画的粗细差不多。

serif 字体容易识别，它强调了每个字母笔画的开始和结束，因此易读性比较高，sans serif 则比较醒目。在走文阅读的情况下，适合适用 serif 字体进行排版，易于换行阅读的识别性，避免发生行间的阅读错误。

sans serif 强调每一个字母，serif 更强调于一个单词。

中文字体中的宋体就是一种最标准的 serif 字体，衬线的特征非常明显。字形结构也和手写的楷书一致。因此宋体一直被做为最适合的正文字体之一。不过由于强调横竖笔画的对比，在远处观看的时候横线就被弱化，导致识别性的下降

以上的解释依旧来自百度百科。为了让大家更加直观的了解，我制了张小图，方便大家对比：

许多人还是认为，就屏幕上的字体排印，“衬线还是无衬线”这个问题本身就能回答。实际上没那么简单。与普遍观念相反，如果你设置的正文字体大于12像素，衬线和无衬线的表现就会一样好。低于12像素，衬线字体渲染的不够锐利，但反正（这把我们带到第二点）在现代的显示器上12像素实在太小。

所以你需要按照网站的字体大小需求来决定用衬线还是无衬线，因此对于字体大小我们又值得讨论下了…

大小

你的正文字体的大小并非由你的个人喜好决定。它取决于阅读距离。考虑到通常电脑要比书本远，桌面字体的尺寸需要比印刷品上使用的字体更大。

下边的插图说明，正文文本离你越远，它就应该更大。两个黑色的A和两个红色的A的尺寸相同。但由于右边放的较远，看上去更小。右图中的红色A看上去和左图中的黑色A一样大：

你把文本放得越远，它看起来就越小。文本放的越远，你需要把它设的更大来弥补一个更大的阅读距离。到底要多大，这里边也有学问。如果你没有经验，一个好用的办法是，手举一本印刷良好的书，把它放到一个能够让你舒服地阅读的距离，同时朝你的网站看来比较。

没有 Web 设计经验的平面设计师会对 Web 上良好的正文字体与印刷品相比需要达到的大小感到吃惊。注意，只有当你把它边靠边比较时它才算大，在一定距离看则不会。

如果在增大正文字体大小来匹配后，新的文字大小一开始吓到你，别担心，这是正常的。不过，一旦你习惯了它，你就不会再去用“标准”的字体大小了。

2006年开始推这些 “perspectively proportional (远视比例)”字体大小。当一开始宣扬用16像素 Georgia 做正文字体的基准引来不少愤怒的眼光和嘲笑，但现在它或多或少已经是一项共同标准。随着分辨率的不断提高，那项标准正慢慢过时。

行高和对比度

虽然正文文字大小可以通过距离观察的方法来估算，行高则需要一些调整。考虑到更大的阅读距离和（我们所说的）像素点问题，最好给屏幕文本比印刷文本更多一点的行高。140%是一个不错的基准，但当然，这取决于你所用的字体。

今天你要确保对比度不是太低（如，灰色文字在浅灰色背景上）或太花哨（如，粉红色在黄色上）。由于屏幕字体排印是设计为白底黑字，用较暗的背景会遇到点困难，但如果做的正确的话，也可以。现代高对比度屏幕让深灰色文字或浅灰色背景的使用也成为可能，取代深黑色字体加白色背景。但这也并非最重要的问题。

部分内容来自： http://informationarchitects.net/blog/responsive-typography-the-basics/

原文还有更多的讨论，关于移动设备的，如果你有兴趣可以去探索探索。

>>> 继续阅读全文 ...

欢迎关注我们关于 WordPress 技巧的微博：
新浪微博： http://weibo.com/wpjam
腾讯微博： http://t.qq.com/WordPressJam

© 我爱水煮鱼 / 收藏本文 / 4条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博