如何在Electron应用中将原生emoji替换为Apple风格精美emoji？

方案一：全局CSS字体优先级调整（仅macOS） #

macOS系统自带「Apple Color Emoji」字体，直接在全局样式中调整字体族优先级，就能让所有Emoji自动切换为Apple风格，无需修改任何业务代码：

* {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

把这段代码加入应用的全局样式文件（比如global.css），所有页面中的Emoji都会优先使用Apple字体渲染，覆盖系统原生样式。

方案二：跨平台字体嵌入（支持Windows/Linux/macOS） #

如果需要在非macOS平台也显示Apple风格Emoji，可将Apple风格的Emoji字体文件（如提取自macOS的AppleColorEmoji.ttc）打包到应用资源目录，通过CSS全局引入：

1. 将字体文件放入应用的fonts目录下
2. 在全局样式中添加：

@font-face {
  font-family: "AppleColorEmoji";
  src: url('./fonts/AppleColorEmoji.ttc') format('truetype-colors');
  font-display: swap;
}

* {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "AppleColorEmoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

注意：请确保使用的字体文件符合版权要求，避免合规问题。

方案三：Electron资源路径适配（可选） #

如果字体加载出现路径问题，可通过Electron的protocol模块注册本地资源协议，确保字体文件能正确加载：

const { app, BrowserWindow, protocol } = require('electron');

app.whenReady().then(() => {
  // 注册asset协议，用于加载本地资源
  protocol.registerFileProtocol('asset', (request, callback) => {
    const pathname = decodeURIComponent(request.url.replace('asset:///', ''));
    callback(pathname);
  });
});

随后修改CSS中的字体路径为：

src: url('asset:///fonts/AppleColorEmoji.ttc') format('truetype-colors');

以上所有方案均为全局生效，无需逐个查找应用中用户输入Emoji的位置，能一次性替换所有页面的Emoji显示风格。

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