談網頁設計中的字體應用Font Set_經驗交流

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，以尽可能的覆盖所有的系统，而不应该依赖于通用字体族。

 

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

 

跨度樣式="font-family:sans-serif"SPAN>>Lorem Ipsumphpcnltcn/ SPAN>span>
span 樣式="font -family:sans-serif,Arial">Lorem Ipsumspan>

 

第一個寫法的錯誤出現－它根本沒有指定字體，再次是由瀏覽器選擇字體。寫了實際上沒寫。

第二個寫法的錯誤出現順序。因為通用字體族應該在一個字體設定中，其他字體都工作時才作業。因此，以後將指定字體放在通用字體上，會造成製定字體尚未匹配時就使用了通用字體。所以，你應該務必使通用字體和字體集中的最後一個。

 

另外，這裡要說明兩件事情。

首先，瀏覽器應用字體設定中哪個字體的規則雖然看起來很簡單，但其實非常棘手。我會在以後的文章中做具體的說明。

相反，雖然字體的CSS規則名稱叫font-family，但它的實質是一個字體集，而不是等印刷大小的字體家族。印刷上的字體家族是指一系列相同字樣的不同強度組合，例如Lucida Family（包括Lucida Sans、Lucida Sans Typewriter、Lucida Console、Lucida Grande 等）和Arial Family（Arial、Arial Black、Arial Rounded MT 等），但顯然這些字體家族都不適合直接拿來當製作字體集來使用。

今天就到這裡了喲。接下來我們來仔細談談通用字體族。