Flutter Web端Emoji显示为黑白的问题求助

问题原因 #

Flutter Web 默认使用的字体在部分浏览器中不支持彩色Emoji渲染，即便更换常规字体也无法解决——因为浏览器渲染Emoji依赖专门的彩色Emoji字体，比如Noto Color Emoji、Segoe UI Emoji这类。

解决步骤 #

1. 引入彩色Emoji字体到项目 #

在项目的pubspec.yaml中添加字体配置，以Noto Color Emoji为例：

flutter:
  fonts:
    - family: NotoColorEmoji
      fonts:
        - asset: fonts/NotoColorEmoji.ttf

提前将下载好的NotoColorEmoji.ttf字体文件放到项目根目录的fonts文件夹中（没有该文件夹就新建一个）。

2. 为Text组件设置字体 fallback #

通过TextStyle的fontFamilyFallback属性，让Emoji优先使用彩色字体渲染，同时不影响普通文本的显示：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text(
          'Enjoy! 🥳 If there\'s any question',
          style: TextStyle(
            fontFamilyFallback: ['NotoColorEmoji'],
          ),
        ),
      ),
    );
  }
}

fontFamilyFallback的作用是：当主字体无法渲染某个字符（比如Emoji）时，自动切换到指定的备选字体进行渲染。

3. 备选方案：通过CSS全局强制彩色Emoji渲染 #

如果上述方法无效，可在项目的web/index.html中添加一段CSS代码，强制浏览器优先使用支持彩色Emoji的字体：

<style>
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
</style>

验证效果 #

修改完成后重新编译Flutter Web项目，在Chrome等浏览器中打开即可看到彩色Emoji正常显示。

内容的提问来源于stack exchange，提问作者Timm Kent