Noto Color Font在Safari/WebKit中致应用卡顿的问题求助

这是Safari/WebKit独有的Bug，Chrome和Firefox中无此现象。

复现场景 #

• 在Safari中打开Noto Color Emoji官方展示页面，会先显示iOS原生emoji数秒，再渲染Google版emoji；进入页面的Glyphs标签页时会出现短暂冻结
• 本人开发的CapacitorJS应用中，每次进入使用Noto Color Emoji的视图，应用会先冻结，之后才显示正确的emoji
• 对比：非Chromium内核的Firefox运行全程流畅；以下最小示例在Chrome中正常显示emoji，但Safari中完全不可见：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
</head>
<body>
  ⚡️🌍❌✅
</body>
<style>
  @font-face {
    font-family: 'Noto Color Emoji';
    font-style: normal;
    font-weight: 400;
    src: url('./NotoColorEmoji-Regular.woff2') format('woff2');
  }

  body {
    font-family: 'Noto Color Emoji', sans-serif;
  }
</style>
</html>

上述示例中的woff2文件，是通过Google Fonts子集生成工具，指定所需emoji字符列表生成的。

已尝试操作 #

• 确保应用内所有emoji均指定使用Noto Color Font
• 分别用<link>标签和CSS @import方式嵌入字体，问题无改善
• 考虑参考苹果官方文档添加自定义字体，但不确定是否有效，也不清楚在CapacitorJS中的具体实现步骤
• 替换为Twemoji字体后无卡顿，但更倾向使用Noto Color Font

问题分析 #

NotoColorEmoji-Regular.ttf文件大小达24MB，推测卡顿/冻结问题源于字体文件过大，希望能在Safari中实现字体预加载，避免每次进入视图都重复加载导致冻结。

求助需求 #

1. 如何为Noto Color Emoji或Twemoji生成仅包含所需少量emoji的字体子集
2. 解决上述最小示例在Safari中emoji不可见的问题

测试环境 #

• iPhone 13 Pro，iOS 17.2.1
• iPad Pro 10.5英寸，iOS 17.2
• Mac Apple M2 Pro，Sonoma 14.2.1 (23C71)
• 测试浏览器：Safari、Google Chrome、Firefox

内容的提问来源于stack exchange，提问作者Felix Olszewski