2022 年 1 月 10 日起,Chrome 98 转为 Beta 版,此版本带来一些有趣的功能,比如颜色渐变的矢量字体  COLRv1 ,以及 Origin 版本试验性的视频区域捕获功能。On January 10, 2022, Chrome 98 will go to Beta, which brings some interesting features, such as the vector font COLRv1 with color gradients, and the experimental video area capture function of the Origin version.
COLRv1 Color Gradient Vector Fonts With this release, Chrome supports COLRv1 Color Gradient Vector Fonts as an additional new font format. COLRv1 is a color font that contains glyphs with multiple colors, which can be used in scenarios such as emoji or national flags or multicolor letters.
COLRv1 is an evolution of the COLRv0 font format, designed to make color fonts widely available on the web. COLRv1 fonts bring expressive visual features such as gradients, transitions and compositions at very small font sizes. COLRv1 fonts also support OpenType variants.
In terms of performance, internal shape reuse and compact font format definitions, combined with efficient compression, result in very small font sizes for COLRv1. The figure shows an example of Noto Color Emoji, which is about 9MB as a bitmap font, but only 1.85MB as a COLRv1 vector font (after WOFF2 compression).
Bitmap font (right), Crisp COLRv1 vector font (left)
Origin Trials
This version of Chrome introduces the Origin Trial feature, where developers can try out new features and provide feedback to the web community on the availability, usefulness, and effectiveness of new features.
New Origin Trial: Region Capture
Region Capture is an API for cropping a self-captured video track, currently applications can use getDisplayMedia() to get a capture of the tab they are running in, with or without preferCurrentTab . Using Region Capture, the resulting video track can be cropped to remove some content from it.
The most typical scenario of this function is to share the screen, or only show a certain part of the screen during a video conference.
Other features add an automatic keyword for contains-intrinsic-size The automatic keyword for contain-intrinsic-size allows websites to use the last remembered size of the element, without this feature the web developer would have to guess the rendered size of the element.
AudioContext.outputLatency property The new AudioContext.outputLatency property is an estimate of the audio output latency in seconds. Technically, this is the time interval between when the user agent requests the host system to buffer and when the audio output device processes the first sample in the buffer. (Implemented in Firefox).
CSS Color Adjust: 'only' keyword for color scheme The only keyword has been re-added to the color-scheme specification, and currently supports the Chrome browser. It allows opting out of color schemes for a single specific element. For example to allow overrides to force dimming. For example: div { color-scheme: light } will force the div element out of the color scheme dark.
div { color-scheme: only light } keeps the color-scheme element light and not forced by the user agent to dim it.
Deprecation and removal of WebRTC's SDES key exchange Since 2013, WebRTC's SDES key exchange mechanism has been declared unacceptable for use in relevant IETF standards. Its usage in Chrome has dropped significantly over the past year. SDES was removed because it was a security issue. It exposes the session key to Javascript, which means that an entity that has access to the negotiated exchange, or is capable of breaking Javascript, can decrypt the media sent over the connection.
A more complete introduction to the new features can be found in the official blog.

COLRv1 颜色渐变矢量字体

这个版本中,Chrome 支持 COLRv1 颜色渐变矢量字体作为额外的新字体格式。COLRv1 是彩色字体,包含具有多种颜色的字形,可用于表情符号或国旗或多色字母等场景。

COLRv1 是 COLRv0 字体格式的演变,旨在使彩色字体在网络上广泛传播。COLRv1 字体以非常小的字体大小带来了富有表现力的视觉功能,例如渐变、变换和组合。COLRv1 字体也支持 OpenType 变体。

在性能方面,内部形状重用和紧凑的字体格式定义,加上有效的压缩,导致 COLRv1 的字体大小非常小。该图显示了 Noto Color Emoji 的示例,它作为位图字体大约 9MB,但作为 COLRv1 矢量字体只有 1.85MB(经过 WOFF2 压缩后)。

位图字体(右),Crisp COLRv1 矢量字体(左)

Origin 试用(Origin Trials)

此版本的 Chrome 引入了 Origin 试用功能,开发者可以尝试新功能,并向 Web 社区提供有关新功能的可用性、实用性和有效性的反馈。

新的起源试用:区域捕获功能(Region Capture)

Region Capture 是一个用于裁剪自捕获视频轨道的 API,目前应用程序可以使用 getDisplayMedia() 获取它们在其中运行的选项卡的捕获,无论是否使用 preferCurrentTab 。使用 Region Capture 可以裁剪生成的视频轨道,以便从中删除一些内容。

这个功能最典型的场景就是共享屏幕,或者视频会议的时候,只展示屏幕的某一部分。

其他功能

  • 为 contains-intrinsic-size 添加自动关键字

contain-intrinsic-size的自动关键字让网站可以使用元素的最后记忆大小, 如果没有这个功能,Web 开发人员必须猜测元素的渲染大小。

  • AudioContext.outputLatency 属性

AudioContext.outputLatency属性是以秒为单位的音频输出延迟估计值。从技术上讲,这是用户代理请求主机系统缓冲的时间与音频输出设备处理缓冲区中的第一个样本的时间之间的时间间隔。(Firefox 中已实现)。

  • CSS Color Adjust: 'only' 颜色方案的关键字

only关键字,已重新加入到 color-scheme规范,目前支持Chrome浏览器。它允许为单个特定元素选择退出配色方案。例如允许覆盖强制变暗。比如:

div { color-scheme: light }  会强制 div 元素脱离颜色方案黑暗。
div { color-scheme: only light } 使 color-scheme 元素保持光亮,并使其不被用户代理(user agent)强制变暗。

弃用和删除

  • 删除 WebRTC 的 SDES 密钥交换

自 2013 年以来,WebRTC 的 SDES 密钥交换机制已被宣布为不得在相关 IETF 标准中使用。它在 Chrome 中的使用量在过去一年中显着下降。SDES 被删除,因为它是一个安全问题。它将会话密钥暴露给 Javascript,这意味着有权访问协商交换,或能够破坏 Javascript 的实体可以解密通过连接发送的媒体。

关于新特性更完整的介绍,可在官方博客中查看。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。