网站的关键！教你13步打造优雅的WEB字体

今天，大多数浏览器已经默认支持Web字体，日趋增多的字体特性被嵌入最新版HTML和CSS标准中，Web字体即将迎来一个趋于复杂的崭新时代。下面是一些基本的关于字体的规则，特别适用于Web字体。

印刷字体是静态的，而网页字体却是圆滑可塑的。设计师必须预测跨浏览器及终端用户的最终结果，而不仅限于学习如何实现某种特定的视觉外观。除了掌握简单的规则以外，他们一样要理解背后的原因。

01 了解字体的用途

第一要务是检查将使用的字体究竟能做什么。基本上所有字体的用途都是相似的，但有些字体比其它更加合适。Unicode编码的字体提供了成千上万种字形的可能性，而OpenType字体格式则支持更多的功能，例如小号大写字母，旧式风格数字，自由连字以及上下文交替等。

然而，字体的质量取决于字体设计师的创造水准。如果设计者忽视了绘制所有必须的字符，或者忘记了创建相关的功能，那么排版的细节问题也就变得意义不大了。创造专业字体需要大量的时间和精力，而有些设计师并未做好充足的准备。

因此，在将字体纳入页面设计前，检查其字符集和功能的工作就变得举足轻重。字体就像工具箱，有些时候工具箱几乎是空的，用途有限，就像字体只有大写、小写、数字和一些基本拼写一样；有些时候缺少的却是某些关键工具，如果有一把螺丝刀，一把锯但却没有锤子的话，一些钉东西的活就难以完成。

02 巧妙的字集

FF Sero by Jörg Hemker

“字体回滚”（Font Fallbacks）是以单个字符为基准发生的。一旦字符在指定的字体中丢失，回滚系统就会自动从列表中的下一个字体调用这个字符，然后切换回原来的字体。灵活利用这项特性可以达到惊人的效果。举例来说，字体的字符集不具有旧式风格的数字，那么可以找到具有对应数字的字体；删减该字体，只留下所需数字，将其放入回滚列表。文本中的所有数字就会以旧式风格的方式呈现，而其余部分将会以正常字体显示。这可以使你不必对数字进行分别格式化，也摆脱了页面中多余的HTML标签。

03 弄懂数字

很多专业级的字体都具有几个不同的数字字符集。每个字符集都有它特殊的用途。表格式数字占据相同的空间，让它们垂直排列，而宽度比例数字与其设计相符– 举例来说，数字4要比1宽得多。一方面，旧式风格数字的设计模仿了带X高度属性，上行和下行字母的的小写字符，使其与大小写混合的文本完美融合。另一方面，内衬的数字用于数值，或与大写文本一起使用。

04 切勿伪造字体

FF Ernestine by Nina Stoessinger

CSS使你可以伪造一些事情。如果字体本身没有粗体的变体，<b>标签可以通过双重渲染+略微侧移的方式将文本人为地加粗。为没有斜体样式的字体加上<i>标签可以实现斜体效果。由此产生的扭曲字符令人惨不忍睹。

更重要的是避免使用<b>和<i>标签，而用<strong>和<em>取而代之。前者只涉及字体的外观，也就是所谓的Bold和Italic. 但或许你只想通过改变颜色和大小的方式强调文本。所以明确你的目的就变得重要了– 加粗字符，抑或强调内容？使用后者赋予你通过CSS文件轻松改变文本外观的自由。一般来说，在CSS文件里定义所有的文本样式，尽可能避免局部样式定义。

05 但如果你必须伪造的话，逼真些

当字符集当中缺少小号大写字母时，伪造它们总会使其相较周围字体过于单薄。倘若字体样式有一个半粗体的变体，或普通和粗体的粗细程度相差无几，那么可以使用更粗的那个来调节文本的明暗程度。别忘了给小号大写字母一点额外的字符空间。

06 谨慎使用复制粘贴

有时候你会在页面中本应是重音或其它特殊字符的地方发现难以辨认的字符。当从文本编辑软件中复制非UTF-8编码的文本时会产生这种情况。字符编码系统将所有的字形映射至给定的字符集，以方便通过网络或存储介质传输数据(主要是文本或数字)。

尽管HTML可以兼容UTF-8，但它会曲解从其它任意编码系统中直接复制的文本，将特殊字符变为随机字母和符号的奇怪组合。此外某些内容管理系统在复制文本的同时也会一并复制格式，造成不可预知的后果。要避免这种问题，最好的办法是使用简易文本编辑器将复制的内容转换为纯文字的格式，而后从那里复制并粘贴到CMS当中。

07 学习HTML实体

FF Spinoza by Max Phillips

看看你的键盘– 你可能没有意识到可用的字符是多么丰富。它们当中的很多是被HTML实体定义的，所以熟记常用的实体是必要的– 便于页面全局排版。你不能直接使用小写的x代替乘法符号，商标符号不仅仅是一个简单的大写T和大写M，浮动的重音符也不能代替引号。

(编辑：小酷)