Webデザインにおけるセリフ・サンセリフフォントの応用_体験交流

Howdy, 大家好，又是我~ 

上一次我们简单的谈了一下font set和一些要注意的基本问题。今天我们继续字体这一话题，深入讲讲上次提到的“通用字体族”。首先是最常用的 serif 和 sans-serif 这两个通用字体族。

 

- serif

Serif 在印刷学上指衬线字体。为了理解衬线字体的概念，大家先看几个典型的衬线字体的例子：

My
Georgia字体 King
Times New Roman 字体 汉字
宋体

单词 My 中的字母 “M”上下方突出的短横线就是所谓的衬线。同样，y的上方，K的上下，i 和n的下方也都有衬线，所以这些字体都被称为衬线字体。但衬线字体并不一定都有衬线，比如上面例子中的g, “汉”和“字”。事实上，只要满足末端加强原则的字体都是衬线字体。所谓的末端加强，就是使用衬线或粗细变化，使字体笔画的末端得到加强，以改善小号文字的可读性。比如上面例子中的y的下半部分，还有宋体的中文字符，都是采取加粗笔划的末端来达到末端加强的效果。除此之外，很多衬线字体还会采用加强竖向笔划（比如宋体中竖比横粗），夸张字形（最明显的就是小写g这个字符了）等方法进一步改善它的可读性。

因为衬线字体的可读性非常好，所以它应用的最多的地方也正是出版物或者印刷品的正文内容等以大段文字作为表现形式的作品上。

比较常见的衬线字体有 Georgia, Garamond, Times New Roman, 中文的宋体等等。

 

- sans-serif

衬线字体以外的一切字体都是无衬线字体。sans- 这个前缀其实是法语，所以比较标准的发音是 /san/ 而不是 /sans/。它的意思是“没有”。所以sans-serif就是无衬线字体。

Gut 
Verdana 字体 Might 
Arial 字体 书写 
幼圆

无衬线字体比较圆滑，线条一般粗细均匀。比较适合用作艺术字、标题等。因为无衬线字体通常粗细比较均匀，所以在小字体显示的时候，可读性会降低，容易引起视觉疲劳。

常见的无i衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。

 

- 什么时候用serif？什么时候用sans-serif？

从上面的介绍中，我们可以知道，衬线字体之所以被设计出来，就是为了用作正文内容的。大家可以随手抄起一张报纸，看看上面的文章是不是宋体。如果手头有外语读物的话，也可以翻来看一下，正文都是衬线字体。同样大小的衬线字体比无衬线字体容易阅读：

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

然后大家可以把报纸翻到头版头条——标题一般都会是各种粗细一致的综艺体或者是中Webデザインにおけるセリフ・サンセリフフォントの応用_体験交流。英文报纸的标题大多也是无衬线的。这个就是应用他们的基本原则。

但是大家可以看很多网站——它们的正文内容恰恰是无衬线的Tahoma, Verdana, Arial等等。中文网站可能因为字体的局限性，仍旧使用宋体居多，但查看它们的样式表，就会发现候补字体也大多是无衬线的。这样是不是不好呢？

 

当然不是。

 

衬线字体的可读性其实仅仅体现在小字体上。大家可以拿出刚刚抄起来的报纸，和你显示器上的文字比较一下——你会发现，报纸上的文字比显示器上的文字整整小一圈。实际上，新明晚报上通常大小的宋体文字，在点距为0.25mm的高质量液晶显示器上，大小大约只相当于10px ~ 11px的显示字符；在普通的液晶显示器（点距一般为0.28mm）上，甚至可能只相当于8px~10px的显示字符。

这个就是 print media 和 screen media 的最大区别。印刷业为了节约成本，因此会尽可能的在保证可读的情况下，把文字印小。显示器不存在这样的成本，因此可以显示比较大的文字。在文字足够大的情况下，无衬线字体也是同样可读的。而且因为无衬线字体通常有艺术性，因此在显示器上显示通常比较赏心悦目；而且无衬线字体种类比衬线字体多得多，因此选择余地也很大。所以大家尽可以放心去使用。但是必须保证以下原则：凡是使用无衬线字体的，必须保证其在正文内容中的可读性。否则，使用衬线字体。换而言之，如果你要使用无衬线字体显示网页的正文内容，那么，你必须把它的font-size设的足够大，以保证用户能轻易阅读。

至于具体将font-size 设多大，是因字体而异的。12px 对于 Verdana 来说已经完全足够，但是要能轻易的阅读隶书，可能需要24px以上才行。

对于11px以下的英文字体，推荐使用衬线字体。至于中文，因为显示器的硬件限制，不论是什么字体，都不推荐使用11px以下的font-size来显示。

 

- 其他的通用字体族

印刷学中，除了serif 和 sans-serif 之外，通常还有 monospace 等宽字体、scripts 手写体（比如花体）、blackletter 铅字体（也叫 gothic 哥特体。严格的说，很多常用的serif字体其实是gothic字体）、ornamental 装饰体（那些在文字笔划上或者周围有装饰花纹的字体。很多中世纪书籍上很常见。如果脑残体真的成了字体，那么应该可以算装饰体吧……）和 symbol 符号字体（比如有名的wedding123……）。

 

不过CSS对通用字体族的定义有点不一样。除了serif 和 sans-serif 之外，CSS还允许以下几个通用字体族：

• monospace 等宽字体

  所谓的等宽字体，是指每个字符宽度都一致的字体。一个著名的例子就是 Courier New 字体。因为字符宽度一致，所以特别容易对齐，能快速精确的定位到某行某列，因此经常用来显示代码。

  要注意的是，一个等宽字体同时也可以是一个衬线（或者非衬线）字体。比如 Courier New 这个字体也可以看作是一个serif（严格的说是gothic）字体。

• cursive 书写体：相当于印刷学中的手写体。中文的华文行草就是这样的一个字体。
• fantasy 梦幻体：相当于印刷学中的装饰体。非常少见的一种字体，基本没有参考价值。

要注意的是，CSS中不支持symbol字体族。使用symbol类的字体请用图片。

 

- 一些你不知道的事情

• 中文的Webデザインにおけるセリフ・サンセリフフォントの応用_体験交流其实是衬线字体。大家可以看下面的图：

  

  大家可以看到，其实Webデザインにおけるセリフ・サンセリフフォントの応用_体験交流的确是经过末端加强的，所以很多印刷品的正文也会使用Webデザインにおけるセリフ・サンセリフフォントの応用_体験交流。像这种使用温和的末端加强，笔划粗细大致一致的字体，其实也可以被称为petit-serif/小衬线体。（那些类似于宋体一样有显著末端加强，并且笔划粗细有明显区别的，通常称为slab-serif/雕版衬线体）

  只是很遗憾，因为诸多的硬件原因，在显示器上实际显示Webデザインにおけるセリフ・サンセリフフォントの応用_体験交流时，大家还是可以把它看作一个无衬线字体

• 斜体は斜体ではありません

  斜体は斜体です。イタリックはその名の通りイタリア語です。イタリックは書き方（習字）、オブリークは活字体であり、両者は別物です。中学校の英語学習書で教えられる書き方はイタリア式です。イタリア語のほかに、より一般的な書き方としては、フランス語スクリプト（伝説の筆記体、正しくはフレンチスクリプト）、ゴシック体、アブラハムスクリプトなどがあります。

  多くの洗練されたフォントは、単に斜体で表示するのではなく、イタリア語フォント用の特別なフォント セットをカスタマイズします。たとえば、下の図では、3 行のテキストがすべて Georgia フォントで表示されています。 1 行目は標準、2 行目は斜体、つまり斜体、3 行目は実際の斜体です。

  

  3 行目の文字 a、l、i、e、およびその他の文字を注意深く見てください。違いがはっきりとわかります。実際、Georgia Italic と Georgia はシステム内の 2 つの異なるフォント ファイルです。 font-style: italic を指定すると、システムは自動的にフォント Georgia Italic が存在するかどうかを検索し、このフォントを使用してテキスト コンテンツを表示しようとします。

  フォント スタイルを指定するために font-style: oblique を使用する場合、ブラウザは Georgia Italic フォントを探すのではなく、Georgia フォントを直接斜めに表示する必要があるのは当然のことです。したがって、理論的には次の効果が得られるはずです。画像のテキストの 2 行目。残念ながら、CSS 仕様の W3C 独自のリファレンス実装でも、「UA がWebデザインにおけるセリフ・サンセリフフォントの応用_体験交流を正しく表示できない場合は、代わりに斜体を使用して斜体を表示できます。」と記載されているため、Webデザインにおけるセリフ・サンセリフフォントの応用_体験交流の区別を実装しているブラウザはほとんどありません。設定したフォント スタイルが斜体であっても、ブラウザでは依然として斜体で表示されることがわかります。

今日はここまでです。次の講義では、合理的なフォント ファミリを構築する方法と、いくつかのフォントの組み合わせを全員に推奨する方法について説明します。それでは、さようなら