Remotion 加图片、中文字体与背景音乐

到目前为止，片子里只有代码画出来的文字和色块。本章加入三样「质感」元素：产品图片、合适的字体和背景音乐——同时学会把它们安全地送进 Remotion 项目。这一章也是版权风险最集中的一章：图片、字体、音乐各有各的规则，踩错一个，轻则片子无法商用，重则惹上侵权。技术问题 Codex 能帮你解决，版权判断必须你自己把关。

7.1 public 目录与 staticFile：素材从哪进入项目

回想第2章的项目结构，里面有一个 public/ 目录。它就是素材的「仓库」：凡是视频要用的图片、音乐、字体文件，都放进 public/ 下的子目录。Remotion 会把整个 public 目录当作「可被视频引用的静态资源根目录」打包进渲染过程——预览和成片看到的资源都来自这里。

在代码里引用 public 里的文件，规范做法是用 staticFile() 函数（而不是手写容易出错的绝对路径）：

import {Audio, Img, staticFile} from 'remotion';

export const ProductScene = () => {
  return (
    <>
      {/* 图片：public/assets/product.png */}
      <Img src={staticFile('assets/product.png')} />
      {/* 音乐：public/music/bgm.mp3 */}
      <Audio src={staticFile('music/bgm.mp3')} volume={0.6} />
    </>
  );
};

文件放在 public/ 下之后，有几个使用纪律值得养成：

路径从 public 根写起，不写 public/ 前缀本身（staticFile('assets/product.png') 对应 public/assets/product.png）；
文件名避开中文与空格，用 product-tea.png 而不是 产品图 1.png——避免跨平台路径与打包问题；
图片按用途分目录（assets/img、assets/audio、assets/fonts），内容一多，目录结构就是你的第一层组织；
新素材放进 public 后，让 Codex 确认引用路径与实际文件完全一致，大小写也不能错——路径写错是「画面空白/无声」的最高频原因之一。

7.2 字体：中文字体必须自己加载

如果你直接让 Codex 在标题上写 fontFamily: '楷体' 或某个系统字体，预览时可能「碰巧能用」，但渲染成片时很可能变成方块或系统默认字形——因为渲染用的浏览器环境和预览不完全一致，中文渲染更是依赖字体文件本身。视频里要保证字形一致，正确做法是显式加载字体，两大主流方案：

Google Fonts 方案（联网下载开源字体，适合西文和部分常见字体）：Remotion 提供官方的 @remotion/google-fonts 包，把需要的字体「加载」进项目后即可用；
本地字体方案（适合中文商用字体、品牌定制字体）：把字体文件（推荐 .woff2 等网页格式）放进 public 或按官方本地字体包 @remotion/fonts 的说明引入，再通过代码加载。

中文场景下，本地字体方案往往更实用：中文字体文件大、Google Fonts 的中文覆盖有限，而且很多你要用的字体（品牌指定字体、开源中文字体如思源黑体）都适合本地引入。字体文件的加载细节、包名与 API 都在快速变化，请务必让 Codex 先读官方文档再动手（这正是第3章训练过的习惯），并让它交代清楚：字体文件放哪、用什么包加载、加载完成前渲染如何等待（字体未就绪就出帧，是文字变方块的根因之一）。

验收字体时，只盯一件事：同一段文字，在 Studio 预览里是什么字形，渲染出的成片也必须是什么字形。如果两者不一致，说明字体在渲染环境没有被可靠加载，让 Codex 按官方文档的字体加载方案修到「两处一致」为止。

7.3 声音：背景乐与旁白怎么加、时长怎么对齐

声音和图片一样走 public 目录。背景音乐最基础的用法就是上一节的 <Audio src={staticFile('music/bgm.mp3')} volume={0.6} />：把它放在某个 Sequence 里，它就从那段开始播放；放在最外层，它就伴随整个视频。volume 可以是一个固定音量，也可以写成随帧号变化的函数来做淡入淡出（需要时让 Codex 按文档实现）。

两条和「时长」有关的经验，直接决定片子成败：

先定声音，再定画面，而不是反过来。尤其是带旁白/解说的视频：先确定旁白音频多长，再按它把场景分段（声音是「单一时间源」）。让画面去迁就音频长度，永远比让音频迁就画面自然。背景音乐没有对白约束，但也应知道它的总长与视频是否匹配、要不要做淡出收尾；
音频格式用通用编码（如 MP3/AAC/WAV）。避免用罕见格式，以免某个渲染环境解不出声音；渲染完成后，用本地播放器播一遍成片，确认「有声音、音量合适、和画面同步」——无声是渲染交付里最尴尬也最常见的失败之一（第8章有专门排查）。

如果你的项目需要旁白/字幕，这属于进阶能力（Remotion 有字幕与语音转写的官方方案与对应技能，见第9章进阶地图）；本章先把「背景乐能响、时长对得上」做扎实。

7.4 版权三查：图片、字体、音乐

这是全教程唯一「没有 Codex 什么事」的环节——版权判断不能外包给 AI。上任何素材前，做三次检查：

素材	你要确认什么	常见坑
图片	图片来源是否有商用授权：自己拍摄、自己设计、明确授权商用且允许二次使用的图库/素材，均可；肖像照片还需本人同意	「网上找的图」「免费图库就能随便商用」是误解——免费≠可商用，条款各不相同
字体	该字体是否允许你的使用场景：开源字体（如思源系列）商用宽松；很多「免费下载」字体仅限个人使用或禁止商用	商用视频用了仅限个人/学习的中文字体，是设计圈高频侵权点
音乐	音乐是否有商用授权：专业版权音乐平台购买的商用授权、明确标注可商用的 CC 音乐均可；热门商业歌曲基本都不可用于商用视频	短视频平台「自带曲库」的授权范围常与外部交付物不同，别默认通用

最后给一条朴素但有效的原则：拿不准的素材，就不用；或换成能确认授权的替代品。制作期省下的每一分授权麻烦，都会在交付或被告知侵权那天加倍还回来。个人练习可以随意，一旦片子要对外发布或商用，以上三查就是硬门槛——和 Remotion 本身的授权（第8章）一起构成「发布前合规两件事」。

第7章：素材进入 Remotion 项目的地图 — 图 7.1：素材工作流总览。所有素材先过「版权三查」，合格的进入 public/ 目录；代码用 staticFile() 或字体加载包引用；渲染器在出帧前等待资源就绪，最终字形、图片、声音全部进入成片。注意图中「版权三查」排在进入项目之前——它是整条管线唯一的「人肉关卡」。

7.5 行动：让示例带上图、字、声

图片、字体、声音都齐了。下一章进入收尾：把这条片子真正渲染成 MP4，学会逐帧验收、排查渲染事故，并在发布前完成合规检查——你将第一次拿到「可交付」的成片。