谷歌提出新的字体调用方案帮助提高中文字体的加载速度

谷歌提出新的字体调用方案帮助提高中文字体的加载速度

大家好,又见面了,我是全栈君。

谷歌旗下的网页字体调用Google Fonts API旨在帮助用户加载不同网站时复用资源达到提高加速速度的目的。目前该公司提出了新的解决方案用来提高中文字体的加载速度, 该方案主要利用机器学习对字符集进行排序。我们知道拉丁语系的网络字体通常大小只有 100~400KB,其他写作系统的字体大小通常只在200~600KB间。

 

但是中文系列的字体文件则需完整包含 44,683 个字符,这致使整个字体文件的大小介于15MB~20MB 之间。因此中文网站在调用网络字体时会占用服务器带宽资源, 同时用户也需消耗更多的时间去加载网络字体文件。

437dde096013d66.jpg

 

谷歌新的解决方案:

本次谷歌提出的新方案时按照机器学习对中文网页进行扫描,然后再统计哪些字符可能会共同出现在网页上。最终按照机器学习结果将44,683 个字符排列成102个切片,在浏览网页时浏览器会按照顺序加载需要的字体。

谷歌本次切片和测试的字体为 Noto Sans SC 切片版,使用切片版字体进行调用时可以极大地降低延迟时间。而谷歌Google Fonts API本身支持跨网站缓存,因此越多的网站使用切片字体用户加载的时间就会越来越短。本次新增的切片版字体为Noto Sans SC Sliced字体文件,Noto Sans SC版不支持切片但拥有更多字体样式。

切片字体调用说明:

@import url(//fonts.proxy.ustclug.org/earlyaccess/notosansscsliced.css);font-family: ‘Noto Sans SC Sliced’, sans-serif;

目前谷歌字体调用国内解析地址已经为谷歌中国BGP服务器,如果你觉得加载缓慢还可使用中科大反向代理。地址:fonts.gstatic.com—>fonts-gstatic.proxy.ustclug.org  ||  fonts.proxy.ustclug.org—>fonts.proxy.ustclug.org (均支持HTTPS)

更多具体细节请访问:https://fonts.google.com/earlyaccess#Noto+Sans+SC+Sliced

测试计划:

谷歌邀请准备测试和使用切片字体的网站帮助改善切片字体技术,使CJK网页字体的加载速度可以继续提高。如果您的网站准备使用切片字体可以在网站头部附加小型js库向谷歌发送切片字体的加载以及网页加载时间。

该库只收集以下内容:1、下载切片字体的时间;2、下载 Google Fonts CSS 时间;3、网页整体加载时间。如果您愿意帮助谷歌改进中文切片字体技术那么请在网页头部添加以下代码:(未使用切片字体无需添加)

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

 

转载于:https://www.cnblogs.com/fonts/p/7442369.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/108204.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 台式计算机网线插哪里,电脑主机网线插哪里?

    台式计算机网线插哪里,电脑主机网线插哪里?问:电脑主机网线插在哪里?答:这个需要根据你家的上网情况来决定,主要是看有没有用到路由器上网,下面进行详细说明。1、如果你家里没有用路由器,那么电脑主机上的网线,需要插在猫的网口/LAN口。温馨提示:没有用路由器的情况下,电脑要上网的话,你需要打开电脑中的“宽带连接”程序,然后填写你家的宽带账号、宽带密码,就能连接上网了。如果你不知道如何用“宽带连接”程序拨号上网,可以点击阅读下面的文章,查看详…

    2022年6月26日
  • 基于MVP架构设计ASP.Net的应用研究

    基于MVP架构设计ASP.Net的应用研究

    2021年7月26日
  • openCV人脸识别简单案例[通俗易懂]

    openCV人脸识别简单案例[通俗易懂]1基础我们使用机器学习的方法完成人脸检测,首先需要大量的正样本图像(面部图像)和负样本图像(不含面部的图像)来训练分类器。我们需要从其中提取特征。下图中的Haar特征会被使用,就像我们的卷积核,每一个特征是一个值,这个值等于黑色矩形中的像素值之后减去白色矩形中的像素值之和。Haar特征值反映了图像的灰度变化情况。例如:脸部的一些特征能由矩形特征简单的描述,眼睛要比脸颊颜色要深,鼻梁两侧比鼻梁颜色要深,嘴巴比周围颜色要深等。Haar特征可用于于图像任意位置,大小也可以任意改变,所以矩形特征值是

    2022年5月28日
  • docker 上传本地镜像_docker本地仓库

    docker 上传本地镜像_docker本地仓库前言之前通过docker搭建过jenkins+python3环境,如果想要在不同的机器上搭建一样的环境,就可以将之前搭建的镜像上传到镜像仓库,这样方便在不同的机器上快速搭建同一套环境。如果公开的话

    2022年7月31日
  • 请说下封装 vue 组件的过程?_组件二次封装的必要性

    请说下封装 vue 组件的过程?_组件二次封装的必要性vue组件的定义●组件(Component)是Vue.js最强大的功能之一●组件可以扩展HTML元素,封装可重用代码●在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能●有些情况下,组件也可以表现用is 特性进行了扩展的原生的HTML元素●所有的Vue组件同时也都是Vue实例,所以可以接受相同的选项对象(除了一些根级特有的选项),并提供相同的生命周…

    2022年9月24日
  • gridview列的汇总

    gridview列的汇总

    2021年8月15日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号