一種字型適配多個瀏覽器
今天聊一下網頁基礎問題，字型的運用，不管是資深設計還是小白設計，這些問題你都逃不過去～
大家好，好久不見，忙於事務，很久沒更新教程了。今天我們聊一個簡單且不簡單的問題： 網頁設計中的字型！
網頁設計其實是要適配多個瀏覽器的，比如一個網站做好了，準備上線了，這個時候開始做測試了。很多人都注重功能和頁面呈現是否正常，卻很少測試人員會注意字型的變化。
設計師： 字型變了你發現了嗎？
程式員： 沒有啊，不都是這個字型嗎？你看。
設計師： 不對啊，我設計稿裡是黑體，你這怎麼是宋體了啊！
程式設計師： 有區別嗎？呵呵～
這是我碰到過的對話內容，網頁裡呈現的字型和設計稿的不一致，很多初級設計，不知道那裡出了問題，很容易就被開發給忽悠過去，不更改問題。今天看了這個，你可以懟他了，理直氣壯的懟～哈哈哈哈
一般蘋果系統自帶瀏覽器的字型是 平方 ，windows系統的主流瀏覽器都是 宋體 ，有個別瀏覽器是 微軟雅黑 。正常情況，測試認為這不會是個BUG
但是在設計師層面來說，這是個問題呢～。
先看下幾種字型的對比： （不好意思，用了自己的名字做栗子哈哈哈...)
同樣是24PX的字型，但是在視覺上有很大的不同。
平方自然是完美的！微軟雅黑也是windows裡很美好的字型，算是比較貼合平方的了。宋體其實是一款非常優雅的字型，可是隨著網路的發展和裝置的創新，設計者發現宋體不能適應小屏裝置顯示器了。
手機螢幕的出現就註定了宋體是隻能出現在PC端的小眾字型了，這種襯線字型，筆畫粗細變化過大，在手機螢幕顯示就顯得很弱，看不清，不好辨別，其實他們的大小是一致的，但是宋體看起來就顯得弱，薄。
所以網頁設計的時候，使用什麼字型是很重要的，藝術類的網站，可以考慮宋體，網際網路類的，電商之類的，還是黑體比較合適，字型清晰，易於辨別。 切記黑體不要隨意加粗～會難看到死。
那會有人說了，那就設定字型不就好了，對啊！在前端開發的時候制定好規範，說明字型要求，就可以了。嗯，這是對的，但是你卻忽視了一個問題， 瀏覽器可以設定字型（這個就是每個人的習慣問題）
我們拋開設定字型的情況，就是初始狀態，網頁的字型在任何顯示器都應該是統一的（把系統分開來說 ）
如何做到在一個系統裡的瀏覽器顯示的網頁字型一致呢？
其實很簡單：在頁面設定的時候，設定一個狀態，就是瀏覽器預設首選是哪種字型、其次是哪種字型。
這樣有什麼好處呢？
好處就是瀏覽器會首選你設定的預設字型，不管那個瀏覽器都會統一字型樣式。而不是顯示瀏覽器自己的字型。
字號
網頁設計裡字型的大小基本是：12 、14、16、18、20、24PX再大就屬於裝飾性的了，不是內容型的了。
文章內容基本是14-16，標題可以是16加粗、18、20、這些是有別於介面設計裡的字型大小的。不可同日而語！
10號字型切記不可用，因為瀏覽器不相容！前端開發也不會給你寫10號字型的哈哈哈
藝術字
網頁裡不缺乏一些藝術字體，很炫酷好看。其實它們都是以圖片或是背景的形式存在的。例如：
今天就說到這，有機會再聊一下字型再網頁設計中的排版。