記錄一下近期接觸的有關字體的一些經驗
一、font-family
平時我們使用css設定字體的話都是使用font-family，如下：
html,body { height: 100%; margin: 0; font-family:"Microsoft YaHei",Helvetica,"PingFang SC","Hiragino Sans GB",Arial,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 12px; overflow: hidden; cursor: default; }
font-family其實是一個集合，瀏覽器會根據用戶本地字體從前往后使用對應字體。排在前面的字體在本地不存在，則使用下一個字體。依次類推，都不存在，則會使用系統默認字體（如win7和win10為微軟雅黑，xp為宋體）。
再來說一下font-family的值，字體名字一般和字體文件的名字是相同的，如下，而不是屬性中出現的名字。
font-family里有一點比較重要，有些字體不使用引號也可識別，但是有些字體就必須使用引號，否則會被判斷為錯誤的value值而使該語句不生效。因此如果你設置字體時，該字體在本地fonts文件夾下明明存在，設定時卻不生效，可以考慮給字體名添加引號嘗試。
二、font-face
當然，如果當你需要使用的字體可能和用戶電腦上的字體不同，就需要使用font-face導入你項目內的字體，這里可以使用url()或者local()，url()使用如下。local()是在用戶本地字體中查找並使用對應的字體，值的寫法可以參考font-family的單值寫法。
@font-face { font-family: 'Segoe UI Emoji'; src: url(~@/assets/fonts/SEGUIEMJ.TTF); } .test { font-family: 'Segoe UI Emoji'; }
當然這里需要分外注意你的css文件與你的字體文件的相對位置，建議使用絕對位置（如果@不生效可以嘗試使用~@）以保證寫入的路徑是正確的：
這里還需要特別注意的一點是：
1、平台不同，系統的默認字體及自帶字體有差別（如windows和mac os）
2、平台相同，系統版本不同，系統默認字體不同（如xp發布時間早於微軟雅黑，它的默認字體為宋體）
3、平台相同，系統版本不同，系統自帶字體不同（如win10上部分字體在win7上是沒有的）
4、平台相同，系統版本不同，系統字體版本不同（相同字體，在win10和win7上支持的字符集不同，一些字符在win10上顯示良好，在win7上無法顯示，可能是字體版本過低導致）
因此，在項目中大范圍地使用到一些不常見的字符（超出基本平面的字符）時，需要對使用的字體做跨系統的考察，以保證在不同系統的電腦上效果一致。