STHeitiSC-Light.woff 黑体-简 细体 苹果 iCloud 备忘录 字体

2015-12-16_122331

2015-12-16_120513

:joy: 继续 Windows 糟糕的中文字体表现,特别是在非高清屏。

在 iCloud 偶然的又发现这个字体,它的大小是 17M,下载地址在末尾,这个字符集不同于 pinghei 的 woff,它应该是完整的,你可以尽情的使用它!

好的上代码:

你可以在 head 标记当中添加以上这段 JavaScript 代码,它的作用是判断 userAgent 中是否包含 windows nt(桌面平台 Windows)字样,如果是则执行打印加载字体的 CSS(style)写入到 head 中。

如果你不想把代码添加在模板结构里,而放进 .js 链接文件里,它们效果是一样的(除非你有两个 head):

这样一来,其它平台和 Windows Phone 就不会载入这个 17M 大的字体。只有桌面平台的浏览器会载入。(当然如果用户切换了 UA 我们只能当那是他自己的事了。。。)

接着,你在 CSS 中应当这样调用这个字体:

为什么我们需要将 “Helvetica Neue”,PingHei,”PingFang SC”, 写一份在它前面?因为 OS X 和 iOS 可能自身就带有这个字体,又或者没有带这个字体,这个时候如果你只写 STHeitiSC-Light 开头,会导致 OS X 和 iOS 默认显示为 黑体-简 细体 这个字体,你要知道 iOS 的默认字体并不是它!因此需要在前面写一份 iOS 的默认字体来解决这个问题。当然你也可以再写个判断,两种都可以。

iCloud 中的 黑体-简 细体:STHeitiSC-Light.woff
iCloud 中配合使用的英文字体:SFNSText(以相同格式增加到代码中,截图中并未使用该字体),它的对应 CSS 为:

如果大小不对可能是 300&500 的宽设定(如果你没有定义会把 400 的显示成 500),如果你通常定义的正常体是 400 粗体是 700 那么可以把上面的 300&500 修改成习惯的大小(虽然这样的话数值是不正确的)。

—-

– – 代价也是巨大的,每个 IP 要下载 17M 加上刷新重新载入,17MB*100IP=1.7G 看着办吧,放到免费 CDN 里去。

最后,对于 UI 设计相较复杂的网页,好像换上这个字体也没有什么卵用,虽然微软雅黑的表现很糟糕,但它毕竟也是仔细设计过的,相较之下这个字体它就无法配合复杂的 UI,只是在单纯展示文字方面可圈可点。直观的可以看到它的笔画末端有类似宋体的喇叭口而不是微软雅黑的直勾勾,灰度小一些显得有点灰加上抗锯齿之后就情深深雨蒙蒙了……

苹果官网所使用的字体 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(呃,貌似苹果官网去掉了几行)。另外名字似乎又可能,貌似可以叫 苹黑?