- Chrome 62 通过提供实际性能指标(而不是理论结果)使 Network Information API 更加实用。
- 现已支持 OpenType 可变字体。
- 您可以从 HTML 媒体元素中捕获媒体流。
- 谨此通知您,Chrome 62 即将迎来一项重要变更。
以及更多功能!
我是 Pete LePage。我们来深入了解一下,看看 Chrome 62 为开发者提供了哪些新功能!
想要查看更改的完整列表?查看 Chromium 源代码库变更列表。
广告网络质量指标
Network Information API 已在 Chrome 中提供一段时间,但它仅会根据用户的连接提供理论网速。假设您已连接到 Wi-Fi,但连接的是速度仅为 2G 的移动网络热点,该 API 会报告 Wi-Fi!
console.log(navigator.connection.type);
> wifi
在 Chrome 62 中,该 API 已经过扩展,可提供来自客户端的实际网络性能指标。利用这些网络质量信号,您可以根据网络情况定制内容。例如,在连接速度非常慢时,您可以通过提供更低的版本来提高网页加载性能。
为了简化应用逻辑,该 API 会根据与移动网络连接的对比情况,返回测得的网络性能。例如,如果连接到超快速光纤连接,API 会报告 4G
。
console.log(navigator.connection.effectiveType);
> 4G
这些信号还将作为 HTTP 请求标头提供,并通过 Client Hints 启用。如需深入了解,请查看示例并查看spec。
OpenType 变量字体
一直以来,一个字体只包含一个字体系列实例,例如一个粗细或一个拉伸。如果您希望使用常规、粗体和斜体,则需要添加三种单独的字体,从而增加网页的粗细。
OpenType 可变字体等效于可在单个字体文件中紧凑封装多个单独的字体。通过调整 font-variation-settings
CSS 属性,可以轻松调整拉伸、样式、粗细等,提供无限数量的样式变体。这三种字体现在可以合并成一个紧凑的文件。
.heading {
font-family: "Avenir Next Variable";
font-size: 48px;
font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
font-family: "Avenir Next Variable";
font-size: 24px;
font-variation-settings: 'wght' 400;
}
OpenType 可变字体为我们提供了一种功能强大的新工具,用于创建自适应排版,并缩减页面重量。如需了解详情,请查看 John Hudson 的 OpenType 变量字体简介。
从 DOM 元素捕获媒体
借助来自 DOM Elements API 的媒体捕获,您现在可以直接从 HTMLMediaElements
将内容(如音频和视频)实时捕获到 MediaStream
中。
对 HTML 媒体元素调用 captureStream()
后,流式传输的内容可以被操纵、处理、远程发送或录制。想象一下,您可以使用网络音频创建自己的均衡器或声码器。或者,使用 WebRTC 将内容流式传输到远程网站。无限可能等待您去尝试。
某些 HTTP 网页的不安全标签
正如我们之前宣布的那样,从 Chrome 62 开始,当用户在 HTTP 网页上输入数据时,Chrome 会在地址栏中使用标签将该网页标记为“不安全”。在无痕模式下,系统也会在所有 HTTP 网页上显示此标签。
还有更多其他奖励!
以上只是我们针对开发者在 Chrome 62 中做出的一些改动,当然还有很多其他变化。
- iOS 版 Chrome 现已支持 Payment Request API。
- 您可以通过 WebVR 源试用开始构建丰富的实验性 VR 体验。
然后订阅我们的 YouTube 频道;每当我们发布新视频时,您都会收到电子邮件通知。
我是 Pete LePage