2024年如何在Safari WebKit中成功部署Noto彩色表情字体

Noto Color Emoji字体在Chrome中运行正常，但在Safari/WebKit浏览器项目中部署时存在各类问题，以下是尝试过的方法及对应问题：

方法1：使用谷歌生成的woff2文件 #

通过谷歌字体服务生成目标表情对应的woff2字体文件。

方法1问题 #

在Safari中查看Noto Color Emoji字形页面时可观察到：

• 渲染时先显示iOS原生字体，数秒后才切换为Noto彩色字体；
• 滚动、调整窗口或选中表情时，表情会随机消失；
• 渲染表情时应用严重卡顿，原因是Safari暂不支持该格式。

方法2：使用nanoemoji转换的sbix格式字体文件 #

借助nanoemoji工具将Noto Emoji的SVG资源转换为sbix格式字体。

方法2问题 #

约5%的表情仍显示原生样式而非Noto样式，例如：☄️、☘️、🎙️、🖼️、🛡️、⛏️、⚒️、🛠️、🗡️、⚔️、🏜️、🏛️

方法3：使用nanoemoji转换的COLRv0格式字体文件 #

通过nanoemoji将SVG资源转换为COLRv0格式（根据兼容性数据，Safari支持COLRv0，但暂不支持COLRv1）

方法3问题 #

转换整个SVG资源文件夹时失败；仅转换少量表情成功后，仍显示macOS原生样式而非Noto彩色样式。

方法4：使用OpenType SVG字体 #

使用Adobe发布的Noto Color Emoji SVG字体，CSS代码如下：

@font-face {
  font-family: 'Noto Color Emoji';
  src: url('NotoColorEmoji-SVG.otf') format('opentype')
}

方法4问题 #

在Safari中存在缺陷：将表情滚出视口后再滚回，表情会变为不可见，大量表情时该问题尤为明显。

可能的解决方案 #

最理想的方案是获取已从Noto Color仓库转换为COLRv0格式的完整字体文件；或解决SBIX格式下5%表情显示异常的问题（该格式其余表现良好）。同时也在寻求COLRv0、COLRv1、SBIX、NotoColorEmoji-SVG.otf之外的替代方案。

内容的提问来源于stack exchange，提问作者Quick Maths