Webデザインにおけるフォントアプリ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>>ローレム・イプサム SPAN>スパン>
スパン スタイル="font-family:sans-serif,Arial">ローレム・イプサムスパン>

最初の方法の欠点は、基本的に指定された文字がないことに相当し、以前の書き込みは、書き込みなしと同等であるということです。

2 番目の書き込み法のトラブルは、一般的なフォント セット内の他のすべての文字が無効になる場合に有効になるためです。したがって、フォント セットの最後の桁に汎用文字を含める必要があります。

さらに、ここでは 2 つのソフトウェア事情について説明します。

まず、ブラウザで使用されるフォント セット内の文字の説明は非常に簡潔ですが、非常に複雑です。

次に、フォント ファミリーの CSS 名はフォント ファミリーと呼ばれますが、実際にはフォント セットであり、印刷デザイン上のフォント ファミリーではありません。組み合わせ、例として Lucida Family (Lucida Sans、Lucida Sans Typewriter、Lucida Console、Lucida Grande などを含む) と Arial Family (Arial、Arial Black、Arial Rounded MT など)、ただしこれらのフォント ファミリーは都不适合直接拿来当フォント セットとして使用します。

今日はここに到着しました。次に私たちは、一般的な文字族を紹介します。