本人采取的是懶人建站的方案：
pc端：

font-family: "Hiragino Sans GB", "Microsoft Yahei", "WenQuanYi Micro Hei", SimSun, Tahoma, Arial, Helvetica, STHeiti;

這些網頁字體依次是 “蘋果麗黑字體”(這個是蘋果系列設備上用)，微軟雅黑、文泉驛(細)微米黑字體，宋體，Tahoma,Arial,Helvetica,蘋果黑體字體(這個是蘋果系列設備上用)

如何選擇網頁字體？
懶人建站建議使用微軟雅黑，如果是數字或者字母的話可以嘗試使用英文字體Tahoma,Arial,Helvetica，兼顧一下蘋果系列設備，附加一個’Hiragino Sans GB’,STHeiti

微軟雅黑如果是小字號會不好看，大字號會比較好看，雅黑字體加粗不好看，大字號不加粗比較美觀。
黑體字也是中國的windows電腦上都有的但是盡量不用黑體字，黑體字少量標題加粗的地方可以用。

除了以上介紹的網頁字體之外的其他的字體均不要輕易使用。

---

以前做項目的時候就依葫蘆畫瓢的設置 { font-family:arial,”microsoft yahei”,simsun,sans-serif; } 等類似的字體，然而當更多的設備和系統出現后，以前這樣的設置已不能滿足網頁在各設備上的顯示需求。

就拿最簡單的宋體(simsun)來說吧，在Windows系統下顯示是一個比較容易閱讀的字體，然而在Mac上簡直無法直視，如下圖給出一個優化前后頁面的對比效果：

因此，出于種種原因，促使我不得不去對字體做一個相應的了解。

對于網站字體設置，本文給出以下意見：
移動端項目：

font-family: Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", sans-serif;

pc端(含Mac)項目：

font-family: Tahoma, Arial, "Helvetica Neue", "Hiragino Sans GB", Simsun, sans-serif;

移動和pc端項目：

font-family: Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;

首先說說字體的種類，字體分為五大種類，然而各設備的支持情況也個不相同，如，

各移動設備系統支持情況：

五大類字體安卓4.0IOS6.0WP8

sans-serif（無襯線）	支持	支持	支持
serif（襯線）	支持	支持	支持
monospace（等寬）	支持	支持	支持
fantasy（夢幻）	不支持	支持	不支持
cuisive（草體）	不支持	不支持	不支持

當然目前這只是移動設備各系統的支持情況，然而pc端個瀏覽器的支持情況也各不相同，如：

五大類字體IE系列ChromeFirefox

sans-serif（無襯線）	支持	不支持	不支持
serif（襯線）	支持	支持	支持
monospace（等寬）	支持	支持	支持
fantasy（夢幻）	支持	支持	支持
cuisive（草體）	不支持	不支持	不支持

下面介紹下個系統的默認字體和常用字體：

系統默認西文字體默認中文字體其他常用西文字體其他常用中文字體

Windows	宋體	宋體	Tahoma、Arial、Verdana、Georgia	微軟雅黑、黑體
Android 4.0以下	Droid Sans	Droid Sans Fallback	Arial	無宋體、無微軟雅黑
Android 4.0及以上	Roboto	Roboto	Arial	無宋體、無微軟雅黑
iOS	Helvetica Neue	Heiti SC (黑體)	Tahoma(v7.0)、Arial、Verdana、Georgia	STHeiti(v7.0)、無宋體、無微軟雅黑
Mac OS X 10.6以下	Helvetica Neue	STHeiti (華文黑體)	Tahoma、Arial、Verdana、Georgia	宋體、無微軟雅黑
Mac OS X 10.6及以上	Helvetica Neue	Hiragino Sans GB (冬青黑體簡體中文)	Tahoma、Arial、Verdana、Georgia	宋體、無微軟雅黑

參考資料：iOS6字體列表、iOS7字體列表、Mac OS X 10.6字體列表、Mac OS X 10.7字體列表 等，在看了一些資料之后，對系統和瀏覽器下的字體就有了一個基本的認識。

有很多同學看到上面這些表格里面的結論，可能就會想到：可以只設置西文字體不設置中文字體。

只設置西文字體不設置中文字體是否可以？答案當然是不可以。因為上面這些系統和瀏覽器的默認字體也僅僅是是一個理想狀態下的設置，這些默認字體僅限于瀏覽器或系統最初的默認字體?，F在的手機都支持字體更換，對于瀏覽器而已也是如此，現在的瀏覽器都支持用戶自己設置字體。因此，只設置西文字體而忽略中文字體設置是存在一定的危險性的。

對于現在Adroid系統的各種字體app，如：字體管家、字體管理等。如果用戶自己下載相關的app字體軟件將字體改掉，這種情況下，我們該如何處置？

如果用戶將默認的系統字替換掉，那我們就只能用其他的中文字體來代替現實，然而就目前而言，移動端的中文字體非常少（幾乎是唯一性），因此，本人還沒有找到相應的解決辦法，后期找到方法再分享出來。

原文地址：http://ued.ctrip.com/blog/web-page-font-settings-did-you-know.html

參考資料：
懶人建站–》網頁字體介紹以及網頁常用字體設置
http://www.51xuediannao.com/html+css/htmlcssjq/webziti.html

總結

以上是生活随笔為你收集整理的网页字体设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。