[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/)