小字体其实蕴藏着很多知识。也许很多与字体相关的知识都集中在设计上。不过，俗话说，多才多艺，并不是压倒性的。技艺高超的人，胆大心细。了解更多总是对的。
就Web上常用的一些字体而言，经常听说的字体类型大致可以分为以下几种：
衬线
无衬线字体（无衬线字体）
等宽（相同宽度）
幻想（幻想）
草书（草书）
其实一般分为衬线字体和无衬线字体。等宽字体还包括衬线单宽字体和无衬线单宽字体。这五个类别是font-family的五个可用字体系列值。
也就是说，上面的五个名字并不代表某种特定的字体，而是一系列的字体。这些通用名称允许用户代理（通常是浏览器）从相应的集合中选择字体。
这也很容易解释。 font-family中的family是家族的意思，也就是说它不仅仅指一个，而是可以指定多个。以上五个英文单词都是font-family的可用值，下面会讲到。详细说一下。
了解有关下面每种字体类型的更多信息。 （本来每个字体都有示意图，但是在博客上显示太烦人了，大家可以到我的Github上看）
serif -- 衬线字体
serif，表示衬线字体。衬线是指在字符笔画末尾带有称为衬线的小细节的附加装饰，笔画的粗细会有所不同。这些细节在大写字母中尤其明显。
好的，那么衬线字体有哪些常见的字体呢？
宋体（SimSun）
Windows下大多数浏览器默认的中文字体是为了适应打印技术而出现的汉字字体。笔画粗细不一，是衬线字体。宋体在小字号下显示效果尚可，但大字号时体验会很差，使用时要小心。不建议将其用作标题字体。
Times New Roman
Mac平台Safari下默认英文字体是最常见、最知名的西方衬线字体之一。许多网络浏览器和文字处理软件都使用它作为默认字体。
sans-serif -- 无衬线字体
sans 代表什么都没有，sans-serif 代表无衬线。特指西文字体中的无衬线字体，对应中文字体中的粗体。与通常机械且统一的衬线字体相比，它们往往具有相同的曲率、直线和尖角。
在中文中，无衬线字体是黑体字体，也称为方形字体或等值线字体。无衬线装饰，字体端庄，横竖笔划，所有字迹粗细一致。
看一下一些常见的无衬线字体。
微软雅黑（Microsoft Yahei）
大名鼎鼎的微软雅黑你可能并不陌生。从Windows Vista开始，微软提供了这种新字体，即无衬线粗体字体，显着提高了字体的显示效果。现在这款字体已经成为Windows浏览器最值得使用的中文字体。
华文黑体（STHeiti）、华文细黑（STXihei）
属于同一字体家族系列。 MAC OS X 10.6之前简体中文系统界面的默认中文字体。正常粗细的是中国细黑，加粗的是中国黑。
黑体-简（Heiti SC）
从MAC 操作系统启动
冬青黑体（Hiragino Sans GB）
Hiragino 也称为Apple Black，是Ziyu Kobo 设计的一系列字体的名称。它是一种新鲜的专业打印字体，在小尺寸下也足够清晰。 Mac OS X 10.6 附带W3 和W6。
Helvetica、Helvetica Neue
在世界上使用拉丁字母和西里尔字母的国家广泛使用。 Helvetica是苹果电脑的默认字体，微软常用的Arial字体也来源于它。
Arial
Windows 平台上默认的无衬线西班牙语字体。有很多变化。比例和粗细与Helvetica非常相似。
Verdana
无衬线字体的优点是在小字符中仍然具有清晰、整齐的结构，易于阅读和识别。
Tahoma
是一种非常常见的无衬线字体。字体结构与Verdana非常相似，字符间距更小，对Unicode字符集的支持更广泛。很多不喜欢Arial字体的人经常改用Tahoma，不仅因为Tahoma很容易获得，还因为Tahoma没有Arial的一些被诟病的缺点，比如难以区分大写“i” ”和小写“L”。 （这是故意写反的）。
monospace -- 等宽字体
程序员其实对这一系列字体很熟悉。我们用来输入代码的编辑器通常会选择固定宽度的字体。
等宽字体是指具有相同字符宽度的计算机字体。它们常见于IDE 或编辑器中。每个字母的宽度相等。它们通常用于排版计算机相关书籍中的代码块。
除了IDE之外，我们看到的技术文章中的代码块也经常使用等宽字体进行排版。
Consolas
这是一组等宽字体，即无衬线字体。该字体采用了微软的ClearType字体平滑技术，主要设计用作代码显示字体。特殊之处在于它的“0”字符添加了斜线，以便更容易将其与字母“O”区分开。
ClearType：微软在其操作系统中提供的一款屏幕亚像素微调字体平滑工具，可以让Windows字体更加美观。在Windows XP平台上，该技术默认关闭，而在Windows Vista中默认打开。
上图是Github代码块的字体设置。可以看到默认字体是Consolas，下面的是其他等宽字体。如果用户系统中没有预装这些字体，则将匹配最后一个等宽字体。代表一个定宽字体族，将从用户系统中选择一个定宽字体进行显示。
antasy 、cuisive
Fantasy 和Cuisive 字体在浏览器中并不常用，并且因浏览器而异。
中文字体的兼容写法
部分中文字体，如font-family:‘宋体’，由于字符编码问题，少数浏览器解释此编码时，出现汉字乱码，设置的字体无法正常显示。
因此，通常会转换成对应的英文书写或者对应的unicode编码，font-family:"宋体" -font-family: "5b8b4f53"。
5b8b4f53是宋代两个汉字的unicode编码表示。类似的写法还有
粗体：9ED14F53
微软雅黑：5FAE8F6F96C59ED1
中国细黑：534E65877EC69ED1
中文粗体：534E65879ED14F53
字体定义的细节
其他小细节也很重要。比如定义字体时，什么时候需要在字体两端加引号？像这样：
p{
font-family: "微软雅黑", "黑体-简", "5b8b4f53";
}当字体名称中间有空格时，对于中文名称字体和Unicode字符编码表示的中文字体，为了保证兼容性，建议在字体两端添加单引号或双引号。
字体定义顺序
主体{
font-family: tahoma、arial、"Hiragino Sans GB"、"5b8b4f53"、sans-serif；
}使用tahoma 作为首选西班牙语字体。小字体结构清晰、整齐，易于阅读和识别；
如果用户的计算机没有预装tohoma，则选择arial作为替代西班牙语字体，覆盖windows和MAC OS；
Hiragino Sans GB为首选中文字体Holly Black，保证MAC用户的观看体验；
Windows下没有预装Holly Helvetica，所以使用"5b8b4f53"宋体作为替代中文字体方案，在小字号下有很好的效果；
最后，最后使用无衬线系列字体，以确保旧版本操作系统的用户可以选择计算机上预装的无衬线字体，以实现向后兼容。
嗯，其实上面的font-family就是淘宝首页正文的字体定义。它非常标准化。每个字体定义都有其含义。
字体书写规则
综上所述，我认为font-family定义的原则大体如下：
1、兼顾中西
必须考虑中文或西班牙语（英语）。
2、西文在前，中文在后
由于大多数中文字体也有英文部分，但英文部分不是很美观，同样，大多数英文字体也不包含汉字。
因此，通常会先进行英文字体的声明，并选择最佳的英文字体。这不会影响中文字体的选择，中文字体的声明也将密切关注。
OK，关于前端设计：必备的字体知识指南和的内容到此结束了，希望对大家有所帮助。
【前端设计：必备的字体知识指南】相关文章：
用户评论
哇，一直觉得字体的选取超重要！这篇文章正好帮我理清思路。
有5位网友表示赞同！
要学习一下吧，想把网站做的更美观精致.
有10位网友表示赞同！
我经常会用一些比较特别的字体来增加设计感
有12位网友表示赞同！
原来字体也有这么多讲究，我还以为随意挑选就行呢！
有6位网友表示赞同！
想弄一个酷炫的页面效果，字体选择肯定得特别重视。
有20位网友表示赞同！
看了标题好期待能学到一些实用技巧
有15位网友表示赞同！
感觉字体知识需要常识一下，这样就能做出更完美的设计.
有9位网友表示赞同！
我的网页设计一直用默认字体，以后试试其他的看看效果
有5位网友表示赞同！
对前端开发不太了解，这篇文章刚好入门学习。
有7位网友表示赞同！
网站的文字看着舒服不累是关键啊，字体选择太重要了!
有16位网友表示赞同！
以前没注意过字体的细节，这下知道了该认真对待了！
有15位网友表示赞同！
想提升网页设计水平 ，了解字体知识很必要啊！
有12位网友表示赞同！
学习学习！最近要做个个人网站，希望能用上一些好看的字体
有14位网友表示赞同！
前端开发看起来真挺专业的，需要好好研究一下！
有9位网友表示赞同！
字体太影响网站的整体感觉了， 这篇文章很有价值!
有16位网友表示赞同！
希望这篇文章能告诉我如何快速找到合适的字体！
有12位网友表示赞同！
原来每个字体的风格和用途都不同啊！真有趣！
有13位网友表示赞同！
前端开发真是个不断学习的过程呀
有7位网友表示赞同！
看完标题就迫不及待想学起来!
有16位网友表示赞同！
这篇文章可以让我在设计方面更有灵感了!
有15位网友表示赞同！