웹디자인에 세리프체와 산세리프체 활용_체험교류

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.

然后大家可以把报纸翻到头版头条——标题一般都会是各种粗细一致的综艺体或者是中黑体。英文报纸的标题大多也是无衬线的。这个就是应用他们的基本原则。

但是大家可以看很多网站——它们的正文内容恰恰是无衬线的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类的字体请用图片。

 

- 一些你不知道的事情

• 中文的黑体其实是衬线字体。大家可以看下面的图：

  

  보시다시피 볼드체는 실제로 끝 부분이 강화되어 있기 때문에 많은 인쇄물에서도 볼드체를 사용합니다. 완만한 ​​끝부분 강화와 대략 일정한 획 두께를 사용하는 이와 같은 글꼴은 실제로 쁘띠 세리프/작은 세리프라고 불릴 수 있습니다. (끝 부분의 강화가 뚜렷하고 획 두께의 차이가 확연한 송 글꼴과 유사한 글꼴을 일반적으로 슬랩-세리프/인그레이빙 세리프라고 합니다.)

  여러 하드웨어적 이유로 볼드체가 실제로 모니터에 표시될 때 여전히 산세리프 글꼴로 취급될 수 있다는 점은 아쉽습니다

• 이탤릭체는 이탤릭체가 아닙니다

  이탤릭체는 비스듬합니다. 이름에서 알 수 있듯이 Italic은 이탈리아어입니다. 이탤릭체는 글씨체(캘리그래피 스크립트)이고, 오블리크는 인쇄 스타일입니다. 중학교 영어학습서에서 가르치는 글쓰기 방식은 이탈리안 스타일이다. 이탈리아어 외에도 더 많이 사용되는 쓰기 방법에는 프랑스어 스크립트(전설의 필기체, 정확한 이름은 프랑스어 스크립트), 고딕, 아브라함 스크립트 등이 있습니다.

  많은 정교한 글꼴은 단순히 기울임꼴로 표시하는 대신 이탈리아어 글꼴용 특수 글꼴 세트를 사용자 정의합니다. 예를 들어, 아래 그림에서는 세 줄의 텍스트가 모두 Georgia 글꼴로 되어 있습니다. 첫 번째 줄은 일반 줄이고 두 번째 줄은 기울임꼴이고 세 번째 줄은 실제 기울임꼴입니다.

  

  세 번째 줄에 있는 a, l, i, e 및 기타 문자를 주의 깊게 살펴보면 차이점을 확실히 알 수 있습니다. 실제로 Georgia Italic과 Georgia는 시스템에서 서로 다른 두 가지 글꼴 파일입니다. Font-style: italic을 지정하면 시스템은 Georgia Italic 글꼴이 있는지 자동으로 검색하고 이 글꼴을 사용하여 텍스트 콘텐츠를 표시하려고 시도합니다.

  글꼴 스타일을 지정하기 위해 글꼴 스타일: 경사를 사용할 때 브라우저는 Georgia Italic 글꼴을 찾지 않고 직접 Georgia 글꼴을 비스듬하게 표시해야 하므로 이론적으로는 다음과 같은 효과를 얻어야 합니다. 그림의 두 번째 텍스트 줄. 불행하게도 CSS 사양의 W3C 자체 참조 구현에도 "UA가 기울임꼴과 기울임꼴을 올바르게 표시할 수 없는 경우 대신 기울임꼴을 사용하여 기울임꼴을 표시할 수 있습니다."라고 되어 있습니다. 따라서 기울임꼴과 기울임꼴의 구분을 구현하는 브라우저는 거의 없습니다. 설정한 글꼴 스타일이 기울어진 경우에도 브라우저에는 여전히 기울임꼴이 표시됩니다.

오늘은 여기까지입니다. 다음 강의에서는 합리적인 폰트 패밀리를 구축하는 방법과 여러 가지 글꼴 조합을 모두에게 추천하는 방법에 대해 이야기하겠습니다. 그럼 안녕