Flutter 表情符号字体可以在 iOS 模拟器上运行，但不能在真实设备上运行

Question

我下载并把

NotoColorEmoji-Regular.ttf

放入资产中，并在 pubspec.yml 中配置它

    - family: NotoColorEmoji
      fonts:
        - asset: assets/fonts/Noto_Color_Emoji/NotoColorEmoji-Regular.ttf

我是这样使用的：

Text(emoji,
  style: const TextStyle(
    fontWeight: FontWeight.w400,
    fontSize: 22,
    height: 1,
    fontFamily: 'NotoColorEmoji',
    color: const Color(0xFF191919),
  ),
)

这适用于

• 安卓模拟器
• 安卓设备
• iOS 模拟器（iOS 15.5、iPhone 13）

它不起作用

• 真实的设备 iOS 12.5.5、iPhone 6。应用程序的其他所有内容在设备上都工作正常，但字体不起作用（即没有显示任何内容，但需要表情符号）。
• 不幸的是，我没有其他真实的 iPhone 设备可供测试=>任何人都可以确认或反驳其他真实设备上的行为吗？

我试过了

• 从设备卸载应用程序

• flutter clean

• 重新安装应用程序(

  flutter run

  )
• 从 xcode 运行应用程序

我发现了

• https://github.com/googlefonts/noto-emoji/issues/72 这表明 macOS 不支持 ttf 格式，但 Apple 会使用 SBIX 格式编译 ttf，该格式不支持 CBDT/CBLC由 NotoColorEmoji 字体使用。但我不知道这是否会是 iOS 的问题？我也想知道，因为它在模拟器上运行良好。

编辑

作为解决方法，我们目前在 ios 上使用系统字体：

TextStyle textEmoji(BuildContext context) {
  return TextStyle(
    fontFamily: Platform.isIOS
      ? null // see https://stackoverflow.com/questions/74710185/flutter-emoji-font-working-om-ios-emulator-but-not-on-real-device
      : 'NotoColorEmoji',
    // ...
  );
}

Answer 1

编辑：我刚刚意识到你正在谈论一种不同的字体，仍然将其留在这里，以防它对某人有帮助

---

对于现在正在阅读本文的人来说，它似乎已在 iOS 上修复。我在我的 flutter 应用程序中使用了 https://fonts.google.com/noto/specimen/Noto+Emoji 字体，它适用于我的 iOS 版本构建 ✨

在

pubspec.yaml

-fonts: 
    - family: NotoEmoji
      fonts:
        - asset: fonts/NotoEmoji-VariableFont_wght.ttf
          weight: 400

我还为表情符号创建了一个小部件：

class Emoji extends StatelessWidget {
      final String emoji;
      final TextStyle? style;
      final EdgeInsets padding;
    
      const TextEmoji(
        emoji, {
        this.style,
        this.padding = EdgeInsets.zero,
      });
    
      @override
      Widget build(BuildContext context) {
        final theme = Provider.of<MyThemeData>(context);
        final emojiStyle = TextStyle(
          fontSize: theme.dimensions.emojiFontSize,
          fontFamily: 'NotoEmoji',
          color: theme.myColors.emojiText(),
        );
        return Padding(
          padding: padding,
          child: Text(
            emoji,
            style: style != null ? emojiStyle.merge(style) : emojiStyle,
          ),
        );
      }
    }