苹果官网所使用的字体 PingHei 平黑 苹黑?(2015)增加2种粗体与细体

2015-08-23_185032

[ 下载地址位于末尾 ]

这是旧的(2014):苹果官网所使用的字体 PingHei 平黑 苹黑?(2014)

去年苹果官网的硬件更新随之更换了 Web 字体,目测是对应 Windows 下而做的。

但是字符集并非是完整的。

今年也随着硬件的更新更新了官网,目前这个字体添加了两种粗体以及一种细体版本,原本的 woff 体积产生了轻微的变化(变大一点点,所以目测依然是不完整字符集)。

可以做一个判断,用 js 之类的判断设备和环境再决定是否载入字体,因为有至少 1M 的体积,例如非桌面环境不载入,如果是自适应网页,则在默认小体积(小于 1024 宽)不载入,这在图片的载入上有很好的效果,也可以用在字体上。

这是压缩包所包含的文件,CSS 中包含了代码,和引用名,路径自己根据情况改:

/PingHei-bold.eot
/PingHei-bold.ttf
/PingHei-bold.woff
/PingHei-light.eot
/PingHei-light.ttf
/PingHei-light.woff
/PingHei-semibold.eot
/PingHei-semibold.ttf
/PingHei-semibold.woff
/PingHei-text.eot
/PingHei-text.ttf
/PingHei-text.woff
/font-pinghei.css

Downloads : http://pan.baidu.com/s/1qW43DJu

苹果官网所使用的字体 PingHei 平黑 苹黑?(2014)

[ 下载地址位于末尾 ]

这是新的(2015):苹果官网所使用的字体 PingHei 平黑 苹黑?(2015)增加2种粗体与细体

在 iPhone6 发布之后更新了官网,于是跑去观摩了下官网,那个质感的导航条没了(至今也没看到有谁复制的一模一样),现在的导航条文字和过去一样使用 svg 来做的,效果也是不错。

另外的一点不同是,其它文字元素很多更换了字体(原先都是宋体,不过目前仍有部分位置和页面还是宋体,几个重新设计过的页面使用了该字体),不是雅黑,于是找了下叫做 PingHei,我将代码和字体下载了过来。

随后放在自己的网站测试了下,这个字体在同号文字中会显得小一些,就需要定义的大小大一些,大概差2个字号,另外一点是个别文字会无法显示则会递减到下一个字体,因此它可以作为字量不多的 UI 中使用,大小都挺美观,但无法作为大量文字的正文(因为大小只有 1M 不到,猜测在字体设计类型上节省了空间,可能并未包含全字符集,因此会有个别文字没有,介于此作为 Web端 的加载有节省的好处,中文字体的体积始终是硬伤)。

CSS 中对中文的定义是 PingHei-light.woff,而 IE8 则使用 PingHei-light.eot 并定义了不同粗细,因后者文件比较大,并且 IE8 以进入淘汰状态,建议使用前者即可。

CSS 中调用使用名称为:PingHei,中文名应该是“平黑”(我不保证就是这个)。

可以观摩下,它没有雅黑的一些粗细不一问题,这点使用在 UI 上尤其适合。(我就因此将标题弄作楷体,雅黑在高低粗细上太差了)。

压缩包内包含字体与CSS文件(CSS使用的时候修改下路劲)。

http://www.apple.com/cn/support/

/PingHei-light.woff
/PingHei-light.ttf
/PingHei-light.eot
/font-pinghei.css

Downloads : http://pan.baidu.com/s/1qW43DJu

2015.08.23 这是新的(2015):苹果官网所使用的字体 PingHei 平黑 苹黑?(2015)增加2种粗体与细体
2015.06.13 添加了对应的 ttf 格式字体,以及更换了 CSS(呃,貌似苹果官网去掉了几行)。另外名字似乎又可能,貌似可以叫 苹黑?