font-family解惑

前言

最近总是遇到了font-family的问题，借此机会总结一下font-family的原理和用法

不同的系统里面内置的字体是不一样的，比如：微软的系统内置有微软雅黑，mac系统内置平方字体，而浏览器上的字体来自系统的字体，系统里面有什么字体，浏览器就有什么字体，两者是同步的。每个浏览器都有他们自己的默认字体，默认字体可以在设置里面重新设置，如果网页没有设置字体，那么同一张网页在不同的浏览器上就会显示不一样的字体，为了解决这种兼容性问题，需要在css里面对font-family进行设置。

font-family 用法

font-family: 字体，通用字体；
复制代码

字体：就是具体某个字体的名字，比如：Helvetica，微软雅黑，Times Roman等

通用字体：指具有某个共同特征的一类字体，是一类字体的集合，不是某一个具体的字体，通用字体共有5种：

serif 带衬线字体，笔画尾部有装饰
sans-serif 无衬线字体，笔画尾部是平滑的字体
monospace 等宽字体，每个字体的宽度相同
cursive 草书字体，字体有的连笔，有的还有特殊效果
fantasy 艺术字体，主要是有艺术效果的字

设置字体的方法：

1. 使用font设置字体的大小和样式

font: 12px/1.5 'Microsoft Yahei','STHeiti',Arial,sans-serif;
复制代码

2. 单独使用font-family设置字体

font-family：'Microsoft Yahei','STHeiti',Arial,sans-serif;复制代码

左边字体的优先级大于右边，浏览器会优先使用左边的字体，如果系统里面没有左边的字体，那么会往右边找下去，直到最后一个字体，例如：系统有Miscroft Yahei字体，那么浏览器就不会使用STHeiti，如何浏览器Miscroft Yahei，STHeiti，Arial三种字体都没有，那么浏览器就会从sans-serif字体族里选择一种，每个浏览器都会有通用字体，所以为了字体能够更好的显示，一般在font-family的最后面加上一个通用字体。

注意：

如果font-family只有中文字体，那么这个字体会同时影响中文和英文
如果font-family只有英文字体，那么这个字体也会同时影响中文和英文
font-family同时有中文和英文字体，那么中文字体只会影响中文，英文字体只会影响英文