fonts

# 在 Remotion 中使用字体 ## 使用 @remotion/google-fonts 加载 Google 字体 这是使用 Google 字体的推荐方式。它是类型安全的，并且会自动阻塞渲染直到字体准备就绪。 ### 前置要求 首先，需要安装 @remotion/google-fonts 包。 如果尚未安装，请使用以下命令： bash npx remotion add @remotion/google-fonts # 如果项目使用 npm bunx remotion add @remotion/google-fonts # 如果项目使用 bun yarn remotion add @remotion/google-fonts # 如果项目使用 yarn pnpm exec remotion add @remotion/google-fonts # 如果项目使用 pnpm tsx import { loadFont } from "@remotion/google-fonts/Lobster"; const { fontFamily } = loadFont(); export const MyComposition = () => { return ; }; 建议仅指定所需的字重和子集以减小文件大小： tsx import { loadFont } from "@remotion/google-fonts/Roboto"; const { fontFamily } = loadFont("normal", { weights: ["400", "700"], subsets: ["latin"], }); ### 等待字体加载 如果你需要知道字体何时准备就绪，请使用 `waitUntilDone()`： tsx import { loadFont } from "@remotion/google-fonts/Lobster"; const { fontFamily, waitUntilDone } = loadFont(); await waitUntilDone(); ## 使用 @remotion/fonts 加载本地字体 对于本地字体文件，请使用 `@remotion/fonts` 包。 ### 前置要求 首先，安装 @remotion/fonts： bash npx remotion add @remotion/fonts # 如果项目使用 npm bunx remotion add @remotion/fonts # 如果项目使用 bun yarn remotion add @remotion/fonts # 如果项目使用 yarn pnpm exec remotion add @remotion/fonts # 如果项目使用 pnpm ### 加载本地字体 将字体文件放入 `public/` 文件夹并使用 `loadFont()`： tsx import { loadFont } from "@remotion/fonts"; import { staticFile } from "remotion"; await loadFont({ family: "MyFont", url: staticFile("MyFont-Regular.woff2"), }); export const MyComposition = () => { return ; }; ### 加载多个字重 使用相同的字体族名称分别加载每个字重： tsx import { loadFont } from "@remotion/fonts"; import { staticFile } from "remotion"; await Promise.all([ loadFont({ family: "Inter", url: staticFile("Inter-Regular.woff2"), weight: "400", }), loadFont({ family: "Inter", url: staticFile("Inter-Bold.woff2"), weight: "700", }), ]); ### 可用选项 tsx load