Mac 网页字体优化小议

字体问题一直是前端和视觉设计师都会头疼的问题，加之各个平台（Windows，Mac，IOS 等）或者用户代理（各种浏览器，Photoshop 等）使用字体渲染的技术皆有不同，在不用图片的前提下，想要达到同视觉设计产出的 PSD 效果一样的字体效果肯定是不可能的了。今天暂且说说 Mac OS X 下字体渲染的问题。

Mac OS X 默认字体

1、默认简体中文

Mac OS X 10.6 之前：系统默认的简体中文为「华文黑体」，由「华文细黑（STXihei）」和「华文黑体（STHeiti）」这两个字重组成。前者是细体，后者是中黑。他们的 font family 都是「STHeiti」。

Mac OS X 10.6 之后：系统默认的简体中文为「黑体-简（Heiti SC）」它是在华文黑体基础上重新开发出来的新字体。于是华文黑体（STHeiti）这个字体族分为「黑体-简（Heiti SC）」和「黑体-繁（Heiti TC）」这 两个字体。分别对应简体中文和繁体中文。同样，它分为两个字重，Light 和 Medium，前者是细体，后者是中黑，但在系统中分别作为常规体( font-weight:normal )与粗体( font-weight:blod )使用。于是就有四个「孩子」了：「Heiti SC Light、Heiti SC Medium、Heiti TC Light、Heiti TC Medium」，简体中文界面用的是 「Heiti SC Light」 和 「Heiti SC Medium」。系统仍保留了 STXihei 和 STHeiti 以向下兼容。

「黑体-简」与「黑体-繁」皆使用「.ttc」（TrueType Collection）格式，可以在单一档案包含多套字型。其中，「黑体-简」与「黑体-繁」的细体在 /System/Library/Fonts/STHeiti Light.ttc，「黑体-简」与「黑体-繁」的中黑在 /Library/Fonts/STHeiti Medium.ttc。

「黑体-简（Heiti SC）」也是 iPhone OS 3.0（版本4.0后改名为iOS）及 iPod nano 第五代以来的默认简体中文字体。黑体间与华文黑体为两套字体，增加了符合 GB18030 规范的字形，其他部分差异微小，仅排列上有差距，笔画的差距也十分微小。

看吧，这就是华文黑体混乱的一大家子。在这种无节操的情况下，苹果花了大把银子，引进了新的字体：

冬青黑体简体中文（Hiragino Sans GB / ヒラギノ角ゴシック体 GB），  它是「Hiragino KakuGothic」 的简体中文版，由大日本网屏制造株式会社和北京汉仪科印信息技术有限公司合 作开发，2008年发布，2009年苹果公司将其加入 Mac OS X 10.6 Snow Leopard 系统。它的字形完全根据中国标准 GB18030-2000 在日本的版本上修改，它也是日本制作的第一个获得中国政府国标认证的字体。在 10.7 之前没有中文名，那时直接叫「Hiragino Sans GB」，后来有了这个美丽的名字「冬青」，知乎有详细说明该名字的来历。它的 Regular 和 Bold 字重分别称作 W3 和 W6。 字数方面，在覆盖国标规定的28522字的基础上，根据 Adobe GB 1-4 字符集修改，共有29064个字符，现在有 W3 W6 两个字重，格式是 OpenType，目前最新版本是 3.02。独立商业版本只在日本发行，售价580美元（近4000人民币）也可以安装于其他系统上。 从设计风格上，这个字体继承了 Hiragino 系列的简洁大方的风格，中宫较大，和西文、假名的字形非常协调，屏幕显示和印刷两方面都非常出色。有很微妙的喇叭口，弧线柔美、内敛，字面宽大程度合理。 这是一款清新的专业印刷字体，但在屏幕显示上也丝毫不逊色，小字号时足够清晰，大字号时又不会「细节欠奉」。

2、默认西文

Mac OS X 的默认西文字体为「 Lucida Grande」

网页字体优化

如果追求更加细致的字体体验，可以试试「冬青黑体简体中文」，如果是在标题上，考虑兼容 Windows ，font-family  可以这样写：

.title-font{font-family: 'helvetica neue',  'hiragino sans gb', 'stheiti', 'microsoft yahei', \5FAE\8F6F\96C5\9ED1,tahoma,sans-serif;}

1. 各个浏览器或者操作系统是不区分大小写的，所以可以统一字体名称为小写；
2. Opera 不识别英文的 font-family，所以加上「微软雅黑」的 Unicode 编码；
3. 由于 Windows 默认没有自带 Helvetica Neue 、 Hiragino Sans GB 和 STheiti，系统会忽略掉前面的设定，优先使用 微软雅黑；Mac OS X 西文字体采用 Helvetica Neue，简体中文优先使用 Hiragino Sans GB，10.6 之前采用默认的华文黑体。Mac OS X 如果安装了 Microsoft Office  默认会安装微软雅黑，之所以在微软雅黑前面加上系统默认的 STheiti，是防止此时渲染为微软雅黑，微软雅黑在  Mac OS X 下的渲染效果不作解释了，同样的如果 Windows 用户安装了Hiragino Sans GB 渲染出来也是很糟糕的；
4. 最后 Windows 默认西文字体设定为 Tahoma，解决一些中英文混排对齐的问题。

Mac 下 Webkit 内核的浏览器有一个私有属性「-webkit-font-smoothing」用来使字体更加平滑，该属性有以下几个值：

• none  禁用该属性
• subpixel-antialiased  次像素抗锯齿（默认值）
• antialiased 抗锯齿（效果更明显）

通常情况下「-webkit-font-smoothing」只会在 Mac OS X上才会有效果，但苦逼的是特殊情况下，Windows 7 的 Safari 也会触发这个属性，使文字渲染变得很模糊，详见《Windows7 下 Safari 字体模糊 bug》。下面让我们来看看 STheiti，Hiragino Sans GB 以及 Helvetica Neue 在 Mac OS X 下的表现吧， 可以在 Mac OS X 下用 Safari 或者 Chrome 查看这个  Demo  对比效果

Chrome：

Safari：

IOS Safari：

IOS 下的 Chrome 表现与 Safari 一致，这里就不再一一截图了。

最后

可以考虑在 Mac OS X 10.6 之后的系统使用 冬青黑体简体中文作为网页默认简体中文，同时加上「-webkit-font-smoothing:antialiased」显示效果会相对更佳。

测试环境