measuring-text

# 在 Remotion 中测量文本 ## 前置条件 如果尚未安装，请安装 @remotion/layout-utils： bash npx remotion add @remotion/layout-utils # 如果项目使用 npm bunx remotion add @remotion/layout-utils # 如果项目使用 bun yarn remotion add @remotion/layout-utils # 如果项目使用 yarn pnpm exec remotion add @remotion/layout-utils # 如果项目使用 pnpm ## 测量文本尺寸 使用 `measureText()` 计算文本的宽度和高度： tsx import { measureText } from "@remotion/layout-utils"; const { width, height } = measureText({ text: "Hello World", fontFamily: "Arial", fontSize: 32, fontWeight: "bold", }); 结果会被缓存——重复调用将返回缓存的结果。 ## 使文本适应宽度 使用 `fitText()` 为容器找到最佳字体大小： tsx import { fitText } from "@remotion/layout-utils"; const { fontSize } = fitText({ text: "Hello World", withinWidth: 600, fontFamily: "Inter", fontWeight: "bold", }); return ( ); ## 检查文本溢出 使用 `fillTextBox()` 检查文本是否超出盒子： tsx import { fillTextBox } from "@remotion/layout-utils"; const box = fillTextBox({ maxBoxWidth: 400, maxLines: 3 }); const words = ["Hello", "World", "This", "is", "a", "test"]; for (const word of words) { const { exceedsBox } = box.add({ text: word + " ", fontFamily: "Arial", fontSize: 24, }); if (exceedsBox) { // 文本将溢出，请相应处理 break; } } ## 最佳实践 **先加载字体：** 仅在字体加载后调用测量函数。 tsx import { loadFont } from "@remotion/google-fonts/Inter"; const { fontFamily, waitUntilDone } = loadFont("normal", { weights: ["400"], subsets: ["latin"], }); waitUntilDone().then(() => { // 现在可以安全测量 const { width } = measureText({ text: "Hello", fontFamily, fontSize: 32, }); }) **使用 validateFontIsLoaded：** 尽早捕获字体加载问题： tsx measureText({ text: "Hello", fontFamily: "MyCustomFont", fontSize: 32, validateFontIsLoaded: true, // 如果字体未加载则抛出错误 }); **匹配字体属性：** 在测量和渲染时使用相同的属性： tsx const fontStyle = { fontFamily: "Inter", fontSize: 32, fontWeight: "bold" as const, "