web字体 衬线字体与非衬线字体区别 字体扫盲

首先是因为心中有很多问题，这些问题困扰我很久了，这些问题对于一个不是专门做前端的web开发人员来说可能都会有。

web可以用什么样的字体？

我特意看了很多网站，包括很多大网站，排名很不错的网站，他们用的字体基本上也就是那几种，没有太大的差别。

淘宝 font: 12px/1 Tahoma, Helvetica, Arial, "/5b8b/4f53", sans-serif;

百度 font-family:arial

qq  font-family:"宋体","Arial Narrow"

从这几个网站可以看出，可用的字体有很多，像Tahoma,Helvetica Arial，宋体等，一定想知道为什么要做这些选择。

首先得明白几个基本的知识点

Serif 衬线字体

指的是有衬线的字体，又称为“有衬线体”（中文惯用名称“白体”），而与之相对的，没有衬线的称为“无衬线体”（中文惯用“黑体”）。衬线指的是字形笔画末端的装饰细节部分。无衬线字体在西文中习惯称sans-serif，其中sans为法语的“无”的意思；而另外一些人习惯称grotesque（德语作grotesk）或“哥特体”，把衬线体称为“罗马体”，但是这些词已经不是很常用了，只保留于字体名称中。这是来自于一段百科的知识，其实用一个图片就可以分出来。

Sam MY NAME任我行

 

 

 

 

 

 

 

 

 

上面字母N上下出现的短线就是所谓的衬线，所以这些字体都被称为衬线体，主要的衬线体有Time New Roman、Georgia、宋体。

衬线体主要用在印刷品或者出版物的正文内容。

 

Sans-serif 非衬线体

无衬线字体比较圆滑，线条一般粗细均匀。比较适合用作艺术字、标题等。因为无衬线字体通常粗细比较均匀，所以在小字体显示的时候，可读性会降低，容易引起视觉疲劳。
常见的无i衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。

关于衬线字体与非衬线体的经典文章 谈谈网页设计字体

关于各种字体的选择与设置的经典文章 默认Web字体样式