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,只是在单纯展示文字方面可圈可点。直观的可以看到它的笔画末端有类似宋体的喇叭口而不是微软雅黑的直勾勾,灰度小一些显得有点灰加上抗锯齿之后就情深深雨蒙蒙了……