最近某人吐槽某門戶網站在mac下chrome字體超丑，然后發現雖然現在mac用戶越來越多，但是大家依然無視mac下的字體差異，于是研究了下mac下網頁中的中文字體，和大家分享。
看了一遍國內各大門戶和SNS網站，雖然可能大家的font-family設置都不太一樣，但是貌似現在只有QQ空間對mac下字體做了優化。
ok，言歸正傳。
mac和windows自帶的字體非常不一樣，所以，針對windows的font-family設置一般不適用于mac系統，而在mac下，會調用系統默認的細黑體(STXihei)，而這個字體渲染的其實并不是很好看。
優化的方法有兩個：
方案一：使用Hiragino Sans GB字體
關于Hiragino Sans GB
Hiragino Sans GB 是衍生自 Hiragino Kaku Gothic（ヒラギノ角ゴ）的簡體中文字體 [1]，近乎完美地繼承了原型的風格，有很微妙的喇叭口，弧線柔美、內斂，字面寬大程度合理。這是一款清新的專業印刷字體，小字號時足夠清晰，大字號時又不會「細節欠奉」(via http://www.zhihu.com/question/19732722)
目前它是mac系統下自帶的比較好看的黑體字體之一，比較適合網頁渲染，也廣受歡迎。
比如QQ空間的字體設置為：
.os_mac {
font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Hiragino Sans GB","Hiragino Sans GB W3";
}
前面三個字體為英文字體。
使用前后對比:
方案二：使用-webkit-font-smoothing:antialiased
webkit內核私有屬性，用于字體抗鋸齒，使用后字體看起來會清晰舒服很多：
當然這個只是webkit私有屬性，firefox和opera等瀏覽器不能使用——其實mac版firefox 的字體渲染比webkit要好看一點兒。
總結
那么，到底那種方案好一些呢？
我做了個測試頁面，分別用默認字體設置加上-webkit-font-smoothing的各個屬性和Hiragino Sans GB使用同樣屬性設置，最終發現：
- webkit默認使用-webkit-font-smoothing:subpixel-antialiased屬性，而不是none；
- Hiragino Sans GB字體和系統默認的細黑體表現差異不是特別大，只是細節更圓潤舒服；
圍觀測試頁面：http://labs.qianduan.net/macfont.html，或直接看頁面截圖。
所以，如果你想偷懶，就只需要添加-webkit-font-smoothing:antialiased就可以了，最求最佳效果，就兩個都用上:P
方法一：
.selector {font-family:"Microsoft YaHei",微軟雅黑,"Microsoft JhengHei",華文細黑,STHeiti,MingLiu}
之所以加上中文名“微軟雅黑”是為了兼容opera。Microsoft JhengHei為微軟正黑體，STHeiti為華文黑體
方法二：
在css手冊中，有這么一個解釋：
@font-face { font-family : name ; src : url( url ) ; sRules }
說明：
name : 字體名稱
url : 使用絕對或相對地址指定OpenType字體
sRules : 樣式表定義
設置嵌入HTML文檔的字體。
嵌入HTML文檔的字體是指將OpenType字體（壓縮的TrueType字體）文件映射到客戶端系統，用來提供HTML文檔使用該字體，或取代客戶端系統已有的同名字體。
url 地址必須指向 OpenType 字體文件(.eot或.ote)。此文件包含可以轉換為 TrueType 字體的壓縮字體數據，可以用來提供HTML文檔使用該字體，或取代客戶端系統已有的同名字體。此文件可以使用 Microsoft WEFT 工具制作。
這樣，我們需要微軟的WEFT工具來完成。
Microsoft WEFT 工具說明頁
http://www.microsoft.com/typography/web/embedding/weft3/
Microsoft WEFT 工具下載地址(點擊下載)
http://download.microsoft.com/download/8/a/1/8a1be03f-f7fc-4504-af9a-7b9230775284/WEFTIII2b1.exe
字體嵌入演示
http://www.microsoft.com/typography/web/embedding/demos/10/demo10.htm
使用教程(E文)
http://www.microsoft.com/typography/web/embedding/weft3/tutorial.aspx
簡單說明一下： 先新建一個htm空文檔，然后打開WEFT，根據向導，添加剛才新建的htm文件
然后下一步，會提示程序將分析系統字體，此時不要勾選skip analysis，繼續下一步，等程序掃描完畢，出現一個對話框，此時先不著急下一步，點"Add"按鈕，選擇一個需要制作的字體，只有TrueType的字體可以被制作，選好后下一步。 接著選擇，生成的ETO字體文件的保存位置 下面這個選框比較重要，第一次就是因為沒弄清楚，導致無效。這里要輸入字體允許被使用在哪些站點內。這個地方建議輸入兩個域名，一個是： http://127.0.0.1，做為本機測試用，另一個是自己的站點的地址，如： http://www.imagecode.net，設置好后，再下一步直到完成。 這樣還不算完，找到生成好的EOT文件，放在網站目錄里，在需要使用這個字體的頁面里，按照下面的方法操作。
<HTML>
<HEAD>
<TITLE>Test Page</TITLE>
<STYLE TYPE="text/css">
<!--
@font-face {
font-family: myfont;
font-style: normal;
src: url(ARIAL0.eot); }
-->
</STYLE>
</HEAD>
<BODY>
<FONT FACE="myfont"> 測試文字</FONT>
</BODY>
</HTML> 最后要注意的是在@font-face的時候，font-family最好自己定義一個字體名稱，不要跟本機的字體名稱一致。否則在<font face='myfont'>的時候，如果EOT字體加載失敗，有可能會使用系統字體來顯示，這樣自己就無法判斷是否CSS字體加載成功。其實，字體是否加載成功，在安裝了WEFT后，會自動彈出提示。
