前言
我周围的码农当中，有很多是技术大神，却常常被字体这种简单的东西所困扰。
这篇文章，我们来讲一讲关于字体的常识。这些常识所涉及到的问题，有很强的可操作性，都是在实际业务中真实遇到的，都是需要开发同学和产品经理、设计师不断重复沟通的。
字体真的只是“系统默认，无从解释”这么简单吗？是产品被忽悠？还是开发在敷衍？二者之间的博弈究竟谁能胜出？学会本文，你就能胜出。
字体分类
常见的字体可以分为两类：衬线体、无衬线体。
1、serif（衬线体）：在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。
常见的衬线体有：
-
宋体、楷体
-
Times New Roman
2、sans-serif（无衬线体）：笔划粗细基本一致，只剩下主干，造型简明有力，起源也很晚。适用于标题、广告等，识别性高。
常见的无衬线体有：
-
黑体
-
Windows 平台默认的中文字体：微软雅黑（Microsoft Yahei）
-
Windows 平台默认的英文字体：Arial
-
Mac & iOS 平台默认的中文字体：苹方（PingFang SC）
-
Mac & iOS 平台默认的英文字体：San Francisco
-
Android 平台默认字体：Droid Sans
补充：
衬线体如今已经很少使用了，你所熟悉的“宋体”，也基本只能在纸质出版物中见到。而非衬线体更符合现代审美。
所以，在这里温馨提示各位：做PPT不要用宋体。如果你不知道用什么字体，那就用系统的默认字体就好：Win 平台用微软雅黑、Mac 平台用苹方字体。
如果你发现一名设计师，在做海报设计、或者制图的时候，使用了宋体，说明她一定是个外行。
字体族
CSS 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类：
-
serif：衬线体。
-
sans-serif：无衬线体。
-
monospace：等宽字体。每一个字母所占的宽度是相同的。写代码的字体尽量用等宽字体。
-
cursive：手写字体。比如徐静蕾手写体。
-
fantasy：梦幻字体。比如一些艺术字。
这五类字体族不代表某一个具体的字体，而是当你在 CSS 中指定字体族的时候，系统就有可能在字体族中找出一种字体来显示。
参考链接：serif，sans-serif，monospace，cursive和fantasy
多字体 fallback 机制
多字体 fallback 机制：当指定的字体找不到（或者某些文字不支持这个字体）时，那就接着往后找。比如：
.div1{
font-family: "PingFang SC", "Microsoft Yahei", monospace;
}
上方 CSS 代码的意思是：让指定标签元素中的文字，在 Mac & iOS 平台用苹方字体，在 Win 平台用微软雅黑字体，如果这两个字体都没有，就随便找一个等宽的字体进行渲染。
注意：
（1）写 CSS 代码时，字体族不需要带引号。
（2）有些 Mac 用户会安装 Office 等软件，安装这些软件后，系统会顺带安装微软雅黑字体。此时，写 CSS 代码时，如果写成 "Microsoft Yahei", "PingFang SC"这种顺序，可能导致有些 Mac 用户用微软雅黑来显示字体。这么好看的苹方字体，你忍心割舍吗？
font-weight：字体的加粗属性
font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你把做好的网页拿给产品经理验收时，网页一打开，产品经理首先关注到的就是字体的加粗问题，你信不信？下面这些话都是产品经理的口头禅，想
发布者：admin，转转请注明出处：http://www.yc00.com/web/1754767014a5199680.html
评论列表（0条）