设计观点View
作者头像

Mac 网页字体优化小议

【一丝冰凉】 /2012-11-02/已有人看过/层叠之美

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

Mac OS X 默认字体

1、默认简体中文

Mac OS X 10.6 之前:系统默认的简体中文为「华文黑体」,由「华文细黑(STXihei)」和「华文黑体(STHeiti)」这两个字重组成。前者是细体,后者是中黑。他们的 font family 都是「STHeiti」。UJN上海云路网络科技有限公司

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 以向下兼容。UJN上海云路网络科技有限公司

「黑体-简」与「黑体-繁」皆使用「.ttc」(TrueType Collection)格式,可以在单一档案包含多套字型。其中,「黑体-简」与「黑体-繁」的细体在 /System/Library/Fonts/STHeiti Light.ttc,「黑体-简」与「黑体-繁」的中黑在 /Library/Fonts/STHeiti Medium.ttc。UJN上海云路网络科技有限公司

「黑体-简(Heiti SC)」也是 iPhone OS 3.0(版本4.0后改名为iOS)及 iPod nano 第五代以来的默认简体中文字体。黑体间与华文黑体为两套字体,增加了符合 GB18030 规范的字形,其他部分差异微小,仅排列上有差距,笔画的差距也十分微小。UJN上海云路网络科技有限公司

看吧,这就是华文黑体混乱的一大家子。在这种无节操的情况下,苹果花了大把银子,引进了新的字体:UJN上海云路网络科技有限公司

冬青黑体简体中文(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 系列的简洁大方的风格,中宫较大,和西文、假名的字形非常协调,屏幕显示和印刷两方面都非常出色。有很微妙的喇叭口,弧线柔美、内敛,字面宽大程度合理。这是一款清新的专业印刷字体,但在屏幕显示上也丝毫不逊色,小字号时足够清晰,大字号时又不会「细节欠奉」。UJN上海云路网络科技有限公司

hiragino_sans_gb.jpgUJN上海云路网络科技有限公司

2、默认西文

Mac OS X 的默认西文字体为「 Lucida Grande」UJN上海云路网络科技有限公司

网页字体优化

如果追求更加细致的字体体验,可以试试「冬青黑体简体中文」,如果是在标题上,考虑兼容 Windows ,font-family  可以这样写:UJN上海云路网络科技有限公司

.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」用来使字体更加平滑,该属性有以下几个值:UJN上海云路网络科技有限公司

  • 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  对比效果UJN上海云路网络科技有限公司

Chrome:UJN上海云路网络科技有限公司

chrome-font.pngUJN上海云路网络科技有限公司

 UJN上海云路网络科技有限公司

Safari:UJN上海云路网络科技有限公司

safari-font.pngUJN上海云路网络科技有限公司

IOS Safari:UJN上海云路网络科技有限公司

1.jpgUJN上海云路网络科技有限公司

2.jpgUJN上海云路网络科技有限公司

3.jpgUJN上海云路网络科技有限公司

4.jpgUJN上海云路网络科技有限公司

 IOS 下的 Chrome 表现与 Safari 一致,这里就不再一一截图了。UJN上海云路网络科技有限公司

最后

可以考虑在 Mac OS X 10.6 之后的系统使用 冬青黑体简体中文作为网页默认简体中文,同时加上「-webkit-font-smoothing:antialiased」显示效果会相对更佳。UJN上海云路网络科技有限公司

测试环境

操作系统版本: Mac OS X 10.7.4 ,IOS 6.0(10A403)
浏览器版本: Chrome 22.0.1229.94,Safari 5.1.6(7534.56.5), IOS 6.0(Safari)
最后更新时间: 2012年11月5日

 UJN上海云路网络科技有限公司