[toc] ## 字体族 族，顾名思义，是**一堆**的字体 主要分为 ### serif：衬线字体 >serif(三瑞服):衬线 字体周围一些装饰性的，弯弯勾勾，小横线小竖线 比如宋体 ### sans-serif：非衬线字体 >sans:无 规范字体  ### monospace：等宽字体 每一个字母占的空间是一样的 ### cursive：手写体 ### fantasy：花体 ## 多字体fallback 一个字体指定以后找不到就会往后找 ## 网络字体、自定义字体 ## 使用 ### 自动查找 如果你只设置了一种字体，且，这个字体族只有英文，但你又写了中文，系统会自动取找一个中文字体族作为使用 ``` body{ font-family:"Monaco"; } ``` ### 可配置多个字体 ``` body{ font-family:"Monaco","PingFang SC"; } ``` ### fallback机制 若你配置的字体不存在 ``` body{ font-family:"aaa","Monaco","PingFang SC"; } ``` ### 字体与字体族 **注意：** 字体族不能用**引号**包裹 ``` .chinese{ font-family:"Microsoft Yahei",serif; } ``` ### 可给一个元素单独设置字体 ### 推荐设置顺序  某平台独有>多平台>字体族 ## 自定义字体 首先我们需要使用`@font-face`命令的`src:url();`把自定义的字体文件引入，然后给它取个名字`font-family:"xxx"`， 最后我们就能给一个元素内的文字设置这个字体`.selector{font-family:xxx}`; ``` .custom-font{ font-family:IF; } @font-face{ font-family:"IF"; src:url("./IndieFlower.ttf"); } ```  ### 远程地址 要服务器允许跨域 ## 引用自定义字体的两种方式 ### @font-face的src ### link的css已经@font-face ## iconfont [http://iconfont.cn/](http://iconfont.cn/)