网页设计中的字体应用

最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小，但是却是前端开发中的基本，因为目前的网页，还是以文字信息为主，而字体，作为文字表现形式的最重要参数之一，自然有着相当重要的地位。

Hihi, 大家好~  最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小，但是却是前端开发中的基本，因为目前的网页，还是以文字信息为主，而字体，作为文字表现形式的最重要参数之一，自然有着相当重要的地位。可惜字体的重要性在很长时间内并没有得到足够的重视。很多人对字体的概念还是停留在 font-family: "宋体", Arial, Helvetica, serif 的阶段，却不明白为什么这样设置，这样设置是否合理等等。现在就让我说说字体的来龙去脉吧。

- font-family

大家知道CSS规则中定义字体是通过 font-family 这条规则来实现的。仔细翻翻CSS的文档，却没有发现任何能指定某一个特定字体的规则。

想想十年前，你可以随处看见类似于这样的代码：

font face="Frankin Gothic Book">Lorem Ipsumfont>

几乎不会有人考虑到，Frankin Gothic Book是一个 Windows only 的字体。在一台Mac上根本看不到Frankin Gothic Book字体的效果，系统因为找不到这种字体，就改用Mac的默认字体显示了。于是，网页的风格就和原来完全不一样了，根本达不到Frankin Gothic Book的效果。于是W3C提出了font set 的概念——将一系列近似的字体按照优先级顺序组成一个列表；浏览器从列表头部开始匹配，知道找到第一个可用的字体，并使用该字体进行显示。

比如上面这个例子，我们可以创建这样的一个font set：

span style='font-family: "Franklin Gothic Book","Lucida Grande"'>Lorem Ipsumspan>

• 我们来看看浏览器怎么来呈现这段文字吧：

• • Windows下：浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book，使用Frankin Gothic Book字体显示。

  • Mac 下：浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book，搜索失败。继续搜索下一个字体——Lucida Grande。系统中存在Lucida Grande字体，终止搜索，并用Lucida Grande字体显示。

这样在Mac上，Mac就能以与Frankin Gothic Book类似的Lucida Grande字体显示这段文字。

但是可能存在一台电脑，上面既没有Frankin Gothic Book字体，也没有Lucida Grande字体，那么它仍然无法正确显示上面的这段文字。于是开发人员不得不在这个字体列表中不断增加字体以适应各种系统，导致这个font set失去原本的“组织近似字体”的作用。于是font set中引入了“通用字体族”，也就是我们经常看见的 serif 和 sans-serif。我会在今后的文章中详细的介绍这两个，以及一些其他的通用字体族。在这里，我们可以简单的将它们理解为一种“在所有指定字体都失效的情况下，浏览器指定的一种最终的代用字体”。

比如我们在改进一下上面的那段示例文字：

span style='font-family: "Franklin Gothic Book","Lucida Grande",sans-serif'>Lorem Ipsumspan>

• 我们再看看浏览器怎么来呈现这段改进后的文字吧：

• • Windows下：浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book，使用Frankin Gothic Book字体显示。

  • Mac 下：浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book，搜索失败。继续搜索下一个字体——Lucida Grande。系统中存在Lucida Grande字体，终止搜索，并用Lucida Grande字体显示。

  • 某系统：浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book，搜索失败。继续搜索下一个字体——系统中也不存在Lucida Grande字体。继续搜索下一个字体——通用字体sans-serif。浏览器应用它的默认sans-serif字体"Arial"来显示这段文字。

请注意两点。首先，通用字体族具体对应哪个字体，是由浏览器决定的。上面例子中浏览器指定Arial为sans-serif字体，但完全有可能另一个浏览器指定Helvetica 为它的sans-serif字体。具体哪个字体被最终应用，是无法预期的。其次，通用字体族只是一种在font set中其他字体都无效时的代用方案。因此——设计者应该尽可能的给出齐全的font set，以尽可能的覆盖所有的系统，而不应该依赖于通用字体族。

类似于以下的两种写法都是错误的：

span style="font-family:sans-serif">Lorem Ipsumspan>
span style="font-family:sans-serif,Arial">Lorem Ipsumspan>

第一种写法的错误在于——它相当于根本没有指定字体，仍旧是交由浏览器选择字体。写了相当于没写。

第二种写法的错误在于顺序。因为通用字体族应该在一个font set中其它所有字体都失效时才起作用。因此，将指定字体放在通用字体之后，会造成制定字体尚未匹配时就使用了通用字体。所以，你应该务必使通用字体处在font set中的最后一位。

另外，这里要说明两件事情。

首先，浏览器应用font set中哪个字体的规则虽然看上去很简单，但其实非常trickish。我会在以后的文章中做出具体的说明。

其次，虽然字体的CSS规则名称叫font-family, 但它的实质是一个font set，而不等是印刷意义上的font family。印刷上的font family 是指一系列相同字样的不同强度组合，比如Lucida Family（包括Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande等等）和Arial Family（Arial, Arial Black, Arial Rounded MT等等），但显然这些font family 都不适合直接拿来当作一个font set来使用。

以上就是网页设计中的字体应用的详细内容，更多请关注php中文网其它相关文章！