先来说字体，声明字体很简单，font-family声明就完事了，但是有时我们可能会看到这样的声明：
h1 { font-family: -apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial;
}
这么一大串到底是几个意思呢，其实只要知道这个font-faimly属性中包含两种类型值就能明白了，一种是字体名称，一种叫做字体族。顾名思义，字体族就是所有字体的一个分类，在CSS世界中一般有以下几种字体族：
-
衬线字体。指的就是笔画开始、结束处有额外的装饰，并且笔画粗细不同。
-
无衬线字体。就是没有装饰，笔画粗细相同。
-
等宽字体。字形的宽度都相等。
-
草书字体。模仿人类手写的字体。
-
奇幻字体。没有归于以上四类字体的其他字体。
所以诸如上面的声明中的sans-serif、Helvetica指的是字体族，前者是衬线字体，后者是无衬线字体。那么这其中的意思就很明确了，如果系统中有前面的字体，那就使用前面的字体，如果没有的话，尝试使用后面的衬线字体，如果没有，则继续往后面的声明中寻找可用字体。
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年我花了一个月整理了一份最适合2020年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
css