首个切片网络字体 — Noto Sans SC Sliced 开放试用

Noto 是一个旨在支持世界上所有语言的字体项目。在这个字体系列中,Noto Sans 简体中文切片 (Noto Sans SC Sliced),提供了切片优化,同时包括了 Light,Regular 和 Medium 等三种字重。

注意:该系列字体的切片优化仅适用于支持 unicode-range 的浏览器

自 2015 年以来,Google Fonts API 又可以在国内使用了,但国内用户在网页中使用中文字体的时候会遇到这样一个问题:拉丁文字体文件大小通常只有 100-400 KB,其他书写系统的字体文件大小通常在 200-600 KB 之间,而 Noto Sans 简体中文字体文件大大(约19MB),因为它包括了 44683 个字符。

如果减少了字体文件大小和网页字加载的延迟时间,那么中文网页字体用户的体验将会有很大改善:在任何大型文档中,都有字符使用模式。通过扫描中文的网页,然后模型会挑选出哪些字符最有可能一起出现,通过静态子集切片策略将所有 44683 个字形排列成 102 个切片。

使用这种方法,整个网页似乎都是在使用 Noto Sans SC,而事实上是只加载了该页面所需的一组字体片段,这样会比加载整个字体要快得多。使用 Google Fonts API 的主要优点是可以进行跨站点缓存,并且由于可以跨站点使用此字体的每个切片,因此延迟加载字体的好处将会随着时间的推移而增加。

有关 Noto 的更多信息,可以查看原文页面上 Noto 的其他部分,也可以访问google.com/get/noto 。另一个版本的 “Noto Sans SC” 系列也可以在这个页面上使用,它不支持切片优化,但是包含更多的样式。

如何使用呢?

只需要在 CSS 文件里加上下面这段代码即可

@import url(//fonts.googleapis.com/earlyaccess/notosansscsliced.css);

使用示例

font-family: 'Noto Sans SC Sliced', sans-serif;

另外

为了帮助 Google 开发他们的切片技术,使 CJK 网页字体加载速度更快,可以在网页中添加一个很小的 JS 库来与 Google 字体共享延迟指标。 这个库会访问 HTML5 Performance API,并将网页效果指标发送给 Google。 这不会收集用户特定的数据。这个JS库用于收集以下信息:

  1. 下载字体切片的时间指标
  2. 下载 Google Fonts CSS 文件的时间
  3. 页面加载时间

要使用这个 JS 库也很简单,只需要将以下代码添加到 <head> 标签的下面即可:

<script src="//fonts.gstatic.com/ea/timing/v1/mlfont.js" async></script>

编译:谷饭  原文:Google Fonts 配图:Google Fonts Twitter

分享到
label, ,

About the author

Add a Comment

电子邮件地址不会被公开。 必填项已用*标注