最近某人吐槽某门户网站在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后，会自动弹出提示。
