淺析font-family屬性及在不同瀏覽器顯示差異問題
這篇文章起因在於我在樣式裡給body加註了字型，且是各個瀏覽器通用的Arial和蘭亭黑。但是產品跑過來和我說字型在她的瀏覽器上和設計稿差異很大。於是我一臉矇蔽的開始了調研之路...
一、font-family定義和用法 ＊
font-family 規定元素的字體系列。
font-family 可以把多個字型名稱作為一個“回退”系統來儲存。如果瀏覽器不支援第一個字型，則會嘗試下一個。也就是說，font-family 屬性的值是用於某個元素的字型族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。
有兩種型別的字體系列名稱：
- 指定的系列名稱：具體字型的名稱，比如："times"、"courier"、"arial"。
- 通常字體系列名稱：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
提示：使用逗號分割每個值，並始終提供一個類族名稱作為最後的選擇。
注意：使用某種特定的字體系列（Geneva）完全取決於使用者機器上該字體系列是否可用；這個屬性沒有指示任何字型下載。因此，強烈推薦使用一個通用字體系列名作為後路。
備註: sans-serif就是無襯線字型，是一種通用字型族。常見的無襯線字型有
Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圓、隸書等等。font-family最後加上sans-serif，也是為了保證能夠呼叫這個字型族裡面的字型，因為大多數計算機裡都有這種字型。
二、匯入瀏覽器沒有的字型 ＊＊
按例拋射出一個比較苦澀的定義（就是我不太喜歡看的形式，但是該有的屬性都定義了的那種，哈哈）
語法規則：
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
接下來拋射出一個example（就是我這種頭腦簡單的比較喜歡看到的形式，哈哈）
@font-face{
font-family： "Hiragino sans GB W3"; //你需要給你的字型起一個名字
src: url('../font/font.ttf');
}
html,body,div,span,h1,h2,h3,h4,h5,h6,p{
font: normal 16px "Hiragino sans GB W3",sans-serif;
vertical-align:baseline;
outline:none;
box-sizing:border-box;
}
提示：說到瀏覽器對@font-face的相容問題，這裡涉及到一個字型format的問題，因為不同的瀏覽器對字型格式支援是不一致的，這樣大家有必要了解一下，各種版本的瀏覽器支援什麼樣的字型。
注意：url請使用小寫字母的字型，用大寫在IE下會出現你喜歡的“驚喜”。當然歌裡告訴我們平平淡淡才是真。所以這種驚喜就不要了。
三、在body裡定義了字型樣式在瀏覽器中不起作用的解決方案 ＊＊＊
說了這麼久，終於來到了本篇的正題。下面直接貼解決方案啦。
1.檢查你的字型是不是用中文寫的，儘管支援utf-8和gb2312，但是同樣為了避開“可愛小甜甜” ie出現的各種問題。建議直接寫font-family:arial，這種格式的。看到一篇文章寫到ie6下font-family:"黑體"會報錯，改成font-family:黑體。即把引號去掉就可以正常顯示。大家可以做一個參考把。
2.當此屬性定義的是全域性樣式，對於表單類的標籤就不會生效，需要再次定義。eg:
body{
font-family:arial;
}
對錶單input就不生效。還需要定義一個input
input{
font-family:arial;
}
3.本地計算機不存在微軟雅黑字型，有的系統預設沒有微軟雅黑體，則一般預設為宋體，只要下載一個微軟雅黑字型，安裝後即可。（個人覺得這個方法基本是廢的，畢竟作為程式設計師我們的工作就是解決差異。而不是讓使用者去下載字型，這是極羞恥的...）
4.如果以上錯誤你都沒踩坑，那麼你有80%的概率跟博主一樣。這裡你需要在你想要修改的地方增加font-family樣式。eg.
<div class="text-change">
<li>測試字型</li>
</div>
如果想要修改“測試字型”的樣式。儘管你在body裡寫了body{font-family:arial;}仍然無效。那麼。請你在.text-change的樣式中新增{font-family:arial;}，此方法我在網上搜了一下沒有人解釋原因，好像也沒有人遇到這種奇葩的問題。
但是博主用這個方法成功懟過了產品挑剔的雙眼。這個方法在我這兒暫時無敵把。
備註：常用中文字型編碼表
四、關於同一字型在不同瀏覽器下顯示不同問題 ＊＊＊＊
這個問題想必困擾了前端工程師們很久很久。經過樓主的調研。我驚訝的發現。此題現在仍然無解。
所以：你無法去使你要的字型在每一個瀏覽器上顯示出來的效果一樣。