谷歌提出字体切片方案以便提高中文字体的加载速度
谷歌旗下的网页字体调用Google Fonts API旨在帮助用户加载不同网站时复用资源达到提高加速速度的目的。
目前该公司提出了新的解决方案用来提高中文字体的加载速度, 该方案主要利用机器学习对字符集进行排序。
我们知道拉丁语系的网络字体通常大小只有 100~400KB,其他写作系统的字体大小通常只在200~600KB间。
但是中文系列的字体文件则需完整包含 44,683 个字符,这致使整个字体文件的大小介于15MB~20MB 之间。
因此中文网站在调用网络字体时会占用服务器带宽资源, 同时用户也需消耗更多的时间去加载网络字体文件。
谷歌新的解决方案:
本次谷歌提出的新方案时按照机器学习对中文网页进行扫描,然后再统计哪些字符可能会共同出现在网页上。
最终按照机器学习结果将44,683 个字符排列成102个切片,在浏览网页时浏览器会按照顺序加载需要的字体。
谷歌本次切片和测试的字体为 Noto Sans SC 切片版,使用切片版字体进行调用时可以极大地降低延迟时间。
而谷歌Google Fonts API本身支持跨网站缓存,因此越多的网站使用切片字体用户加载的时间就会越来越短。
本次新增的切片版字体为Noto Sans SC Sliced字体文件,Noto Sans SC版不支持切片但拥有更多字体样式。
切片字体调用说明:
@import url(//fonts.googleapis.com/earlyaccess/notosansscsliced.css);
font-family: 'Noto Sans SC Sliced', sans-serif;
目前谷歌字体调用国内解析地址已经为谷歌中国BGP服务器,如果你觉得加载缓慢还可使用中科大反向代理。
registry-1.docker.io | docker.mirrors.ustc.edu.cn |
packages.elastic.co | elastic.proxy.ustclug.org |
ppa.launchpad.net | launchpad.proxy.ustclug.org |
archive.cloudera.com/cdh5/ | cloudera.proxy.ustclug.org/cdh5/ |
downloads.openwrt.org | openwrt.proxy.ustclug.org |
registry.npmjs.org | npmreg.proxy.ustclug.org |
www.npmjs.com | npm.proxy.ustclug.org |
fonts.gstatic.com | fonts-gstatic.proxy.ustclug.org (支持HTTPS) |
fonts.googleapis.com | fonts.proxy.ustclug.org (支持HTTPS) |
ajax.googleapis.com | ajax.proxy.ustclug.org |
themes.googleusercontent.com | google-themes.proxy.ustclug.org |
secure.gravatar.com | gravatar.proxy.ustclug.org |
浏览器支持情况:(具体请访问Unicode Range)
浏览器兼容概况 | |||||||||
IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android | Chrome for Android |
49 | |||||||||
52 | 58 | 9.3 | 4.4 | ||||||
14 | 54 | 59 | 10.2 | 4.4.4 | |||||
11 | 15 | 55 | 60 | 10.1 | 46 | 10.3 | All | 5~6.x | 59 |
16 | 56 | 61 | 11 | 47 | 11 | ||||
57 | 62 | TP | 48 | ||||||
58 | 63 | *蓝点网 制表 |
测试计划:
谷歌邀请准备测试和使用切片字体的网站帮助改善切片字体技术,使CJK网页字体的加载速度可以继续提高。
如果您的网站准备使用切片字体可以在网站头部附加小型js库向谷歌发送切片字体的加载以及网页加载时间。
该库只收集以下内容:1、下载切片字体的时间;2、下载 Google Fonts CSS 时间;3、网页整体加载时间。
如果您愿意帮助谷歌改进中文切片字体技术那么请在网页头部添加以下代码:(未使用切片字体无需添加)
<script src="//fonts.gstatic.com/ea/timing/v1/mlfont.js" async></script>
有关切片字体的更多内容请访问网页:https://fonts.google.com/earlyaccess#Noto+Sans+SC+Sliced