Emoji 表情符號

在 Remotion 影片中使用 Emoji 時，最大的挑戰是跨平台一致性。macOS 上的 Emoji 外觀與 Linux 伺服器上的截然不同，這可能導致在本機預覽正常，但在伺服器上渲染出來的 Emoji 樣式不符預期。

問題根源

Emoji 的渲染依賴系統字體：

macOS：使用 Apple Color Emoji，風格圓潤、色彩豐富。
Windows：使用 Segoe UI Emoji，風格現代。
Linux：通常只有 Noto Emoji 或完全沒有彩色 Emoji 字體。

當你在 macOS 開發，但在 Linux 伺服器（如 Docker）上渲染時，Emoji 可能顯示為黑白或方塊。

解決方案：使用 Noto Emoji 字體

最可靠的跨平台解決方案是明確載入 Google 的 Noto Emoji 字體，確保所有環境使用同一套 Emoji 外觀。

安裝 Noto Emoji

npm install @remotion/google-fonts

在你的元件中載入 Noto Emoji：

import { loadFont } from "@remotion/google-fonts/NotoColorEmoji";
 
const { fontFamily } = loadFont();
 
export const EmojiComponent: React.FC = () => {
  return (
    <div
      style={{
        fontFamily,
        fontSize: 80,
      }}
    >
      🎉🚀💡
    </div>
  );
};

透過 CSS 載入

@import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap");
 
.emoji-text {
  font-family: "Noto Color Emoji", sans-serif;
}

export const MyScene: React.FC = () => {
  return (
    <div
      style={{
        fontFamily: "'Noto Color Emoji', sans-serif",
        fontSize: 64,
      }}
    >
      ✨ 歡迎 ✨
    </div>
  );
};

在 Linux 伺服器上安裝字體

若你在 Linux 伺服器渲染，可以安裝 Noto Emoji 系統字體：

# Ubuntu / Debian
apt-get install -y fonts-noto-color-emoji
 
# 更新字體快取
fc-cache -fv

在 Dockerfile 中：

FROM node:20-bookworm-slim
 
RUN apt-get update && apt-get install -y \
  fonts-noto-color-emoji \
  && rm -rf /var/lib/apt/lists/*
 
# 更新字體快取
RUN fc-cache -fv

將 Emoji 作為圖片使用

對於需要特定 Emoji 樣式（如 Apple 風格）的情況，可以使用 Emoji 圖片服務：

const EMOJI_CDN = "https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64";
 
function EmojiImage({ unicode }: { unicode: string }) {
  const codePoint = unicode.codePointAt(0)?.toString(16).padStart(4, "0");
  return (
    <img
      src={`${EMOJI_CDN}/${codePoint}.png`}
      style={{ width: 64, height: 64 }}
      alt={unicode}
    />
  );
}
 
export const MyScene: React.FC = () => {
  return (
    <div>
      <EmojiImage unicode="🎉" />
      <EmojiImage unicode="🚀" />
    </div>
  );
};

使用 Twemoji（Twitter Emoji）

Twemoji 提供開放原始碼的 SVG Emoji，風格一致且可商業使用：

npm install twemoji

import twemoji from "twemoji";
 
function TwemojiText({ children }: { children: string }) {
  const parsed = twemoji.parse(children, {
    folder: "svg",
    ext: ".svg",
    base: "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/",
  });
 
  return <span dangerouslySetInnerHTML={{ __html: parsed }} />;
}

確認 Emoji 字體已載入

Remotion 在渲染時需要確認字體已完全載入才截圖。使用 continueRender 和 delayRender：

import { delayRender, continueRender } from "remotion";
import { loadFont } from "@remotion/google-fonts/NotoColorEmoji";
 
const { waitUntilDone } = loadFont();
const handle = delayRender("載入 Emoji 字體");
 
waitUntilDone().then(() => {
  continueRender(handle);
});

Emoji 在不同輸出格式的表現

輸出格式	Emoji 支援	注意事項
MP4 影片	完整支援	依賴渲染時的字體
GIF	完整支援	彩色 Emoji 可能色彩較少
PNG 靜態圖	完整支援	最佳 Emoji 品質
WebM	完整支援	同 MP4

小結

Emoji 渲染在跨平台環境中預設並不一致。
最佳解決方案是明確使用 Noto Color Emoji 或 Twemoji 字體。
在 Linux 伺服器上需要額外安裝彩色 Emoji 字體套件。
若需要特定風格的 Emoji，考慮使用圖片方式渲染。
使用 delayRender/continueRender 確保字體載入完成後再渲染。