衬线和无衬线字体在网页设计中的应用

大家好，大家好，又是我~上次我们简单聊了一下字体设置和一些应该注意的基本问题。今天我们继续字体的话题，深入上次提到的“通用字体家族”。首先，它是两种常见的字体系列，衬线和无衬线。

- serif

衬线是指印刷中的衬线字体。要理解衬线字体的概念，首先要看几个典型的衬线字体示例：My Georgia Font King Times新罗马字体中文宋体Word My中字母“m”上下突出的短横线称为衬线。同样，在y上面，k上面，I和n下面也有衬线字体，所以这些字体叫做衬线字体。但是衬线字体并不总是有衬线，比如上面例子中的g、“中文”和“中文”。事实上，符合端部加固原则的字体就是衬线字体。所谓端点增强，就是通过使用衬线或粗细变化来增强字体笔画的端点，从而提高小字体的可读性。比如上例中Y的下半部分，以及宋体中的汉字，笔画的末端都是加厚的，达到了末端增强的效果。此外，很多衬线字体还会通过加强竖笔画(比如宋体中竖比横粗)和夸大字形(最明显的是小写G字符)来进一步提高可读性。因为衬线字体可读性很强，所以在出版物或印刷品中使用频率最高，比如印刷品的文字内容，以大段落为表现形式。常见的衬线字体有Georgia、Garamond、Times新罗马、中文宋体等等。除00-1010衬线字体外，所有字体都是无衬线字体。Sans-前缀实际上是法语，所以标准发音是/san/而不是/sans/。意思是“不”。所以无衬线就是无衬线字体。Gut Verdana字体may Arial字体书写圆形无衬线字体比较流畅，线条一般粗细均匀。适合艺术字、标题等。由于无衬线字体通常粗细均匀，当显示小字体时，可读性会降低，容易导致视觉疲劳。没有I衬线的常见字体有投石机MS、Tahoma、verdana、arial、Helvetica、中文短圈、隶书等等。00-1010从上面的介绍中，我们可以知道衬线字体是为了用作文本内容而设计的。你可以拿起一份报纸，看看上面的文章是否是宋体的。如果手边有外语读物，也可以翻一翻。文本是衬线字体。同样大小的衬线字体比无衬线字体更容易阅读：快速棕色狐狸跳过懒狗。然后你可以把报纸翻到头版。——头条通常是各种综合艺术或中等加粗。英文报纸的标题大多没有衬线。这是应用他们的基本原则。但是你可以看到很多网站——，他们的文字内容是Tahoma，Verdana，Arial等等。中文网站可能大部分还是会使用Song Style，因为字体的限制，但是如果你看看他们的样式表，你会发现大部分的候选字体都是无衬线的。这不是很糟糕吗？当然不是。衬线字体的可读性其实只体现在小字体上。你可以把刚抄的报纸拿出来和显示器上的字对比一下。你会发现报纸上的字比显示器上的字小一整圈。事实上，在点间距为0.25mm的高品质LCD上，新《明天晚报》的宋体字大小只有10px ~ 11px左右。在普通的LCD上(点间距一般为0.28mm)，甚至可能相当于8px~10px的显示字符。这是平面媒体和屏幕媒体最大的区别。为了节省成本，印刷行业会尽最大努力使字符变小，同时保证可读性。显示器没有这样的成本，所以可以显示相对较大的字符。当文本足够大时，无衬线字体也是可读的。

此外，因为无衬线字体通常是艺术的，所以在显示器上看通常更令人愉快。而且无衬线字体比衬线字体种类多，所以有很好的选择。所以可以放心使用。但是，必须保证以下原则：至于凡是使用无衬线字体的，必须保证其在正文内容中的可读性。否则，使用衬线字体。换而言之，如果你要使用无衬线字体显示网页的正文内容，那么，你必须把它的font-size设的足够大，以保证用户能轻易阅读。,字体的具体大小，因字体而异。12px对于Verdana来说已经足够了，但是要轻松读懂隶书可能需要24px以上。对于11px以下的英文字体，建议使用衬线字体。至于中文，由于显示器的硬件限制，不建议使用11px以下的字体进行显示，无论字体如何。

- sans-serif

印刷中，除了衬线和无衬线外，通常还有等间距字体、脚本手写(如花体)和黑字母铅字体(也叫哥特哥特)。严格来说，很多常用的衬线字体都是哥特式字体)、装饰性的装饰体(那些在字符笔画上或笔画周围带有装饰图案的字体)。这在许多中世纪的书中很常见。脑残体如果真的变成了一种字体，可以看作是一种装饰体……)和一种符号字体(比如著名的wedding123……)。但是，CSS对一般字体族的定义略有不同。除了衬线和无衬线，CSS还允许以下通用字体系列：等宽字体，所谓等宽字体是指每个字符宽度相同的字体。一个著名的例子是Courier New字体。由于字符宽度相同，特别容易对齐，能快速准确定位一行一列，所以常用来显示代码。请注意，等宽字体也可以是衬线(或非衬线)字体。比如Courier New也可以看作是衬线(严格的哥特式)字体。草书：相当于印刷术中的手写。中国草书就是这样的字体。幻想幻想：相当于印刷中的装饰体。非常罕见的字体，几乎没有参考价值。请注意，CSS不支持符号字体系列。符号类字体使用图片。00-1010中文粗体其实是衬线。可以看到下图：。

可以看到，其实黑体在最后是加强的，所以很多印刷的文字也会用到黑体。这种字体末端加强平缓，笔画粗细大致相同，也可以称为小衬线/小衬线。(类似宋体的端筋明显，笔画粗细差异明显的，通常称为板衬线/雕版衬线体)只是可惜，因为硬件原因很多，在显示器上实际显示黑体时，大家还是可以把它当成无衬线字体。

斜体不是斜体。斜体是倾斜的。斜体，顾名思义，就是意大利语。斜体是调用脚本，斜排是打印样式，这是两码事。中学英语教材的写作风格是意大利风格。除了意大利之外，其他流行的书写风格还有法国风格(传说中的草书，其专有名称为法国文字)、哥特风格、亚伯拉罕风格等等。许多复杂的字体会为意大利风格定制一组特殊的字体，而不是简单地用斜体显示。比如下图中，有三行文字是佐治亚字体。第一行是普通；第二行是斜线，斜体；第三行是真正的斜体。

仔细看字母a、l、I、e等。在第三行，你可以清楚地看到区别。实际上，Georgia Italic和Georgia是系统中两个不同的字体文件。当我们指定font-style: italic时，系统会自动搜索是否存在Georgia Italic，并尝试使用该字体显示文本内容。理所当然，当我们使用font-style:斜线指定字体样式时，浏览器不应该寻找Georgia italic，而是直接显示Georgia Italic，所以理论上应该可以获得图片中第二行文字的效果。遗憾的是，连W3C自己在CSS规范中的引用实现都说“如果UA不能正确显示斜体和斜排，可以用斜体代替斜排”，所以几乎没有浏览器能区分斜体和斜排。即使您设置的字体样式是倾斜的，您也会发现浏览器仍然显示斜体。今天就到这里。接下来，我将谈谈如何构建一个合理的字体家族，并为大家推荐几种字体组合。所以，再见。