Skip to main content

remotion/layout-utils 的最佳实践

请注意以下要点，以确保在使用 @remotion/layout-utils 包时测量正确。

这些提示适用于所有 measureText()、fitText() 和 fillTextBox()。

等待字体加载完毕​

只有在字体加载完毕后才调用 measureText()。这适用于 Google Fonts（下面是示例）或任何其他字体加载机制。

MyComp.tsx
tsx
import { useState, useEffect } from "react";
import { Dimensions, measureText } from "@remotion/layout-utils";
import { loadFont, fontFamily } from "@remotion/google-fonts/Inter";
 
const { waitUntilDone } = loadFont("normal");
 
const MyComp: React.FC = () => {
  const [dimensions, setDimensions] = useState<Dimensions | null>(null);
 
  useEffect(() => {
    // Wait until the font is loaded before measuring text
    waitUntilDone().then(() => {
      const measurement = measureText({
        fontFamily: fontFamily,
        fontSize: 14,
        fontWeight: "400",
        text: "Hello world",
      });
 
      // We don't need to use delayRender() here, because
      // font loading from @remotion/google-fonts is already wrapped in it
      setDimensions(measurement);
    });
  }, []);
 
  return null;
};
MyComp.tsx
tsx
import { useState, useEffect } from "react";
import { Dimensions, measureText } from "@remotion/layout-utils";
import { loadFont, fontFamily } from "@remotion/google-fonts/Inter";
 
const { waitUntilDone } = loadFont("normal");
 
const MyComp: React.FC = () => {
  const [dimensions, setDimensions] = useState<Dimensions | null>(null);
 
  useEffect(() => {
    // Wait until the font is loaded before measuring text
    waitUntilDone().then(() => {
      const measurement = measureText({
        fontFamily: fontFamily,
        fontSize: 14,
        fontWeight: "400",
        text: "Hello world",
      });
 
      // We don't need to use delayRender() here, because
      // font loading from @remotion/google-fonts is already wrapped in it
      setDimensions(measurement);
    });
  }, []);
 
  return null;
};

使用 validateFontIsLoaded 选项v4.0.136​

将 validateFontIsLoaded: true 传递给任何 measureText()、fitText() 和 fillTextBox() 来验证您传递的字体系列是否实际加载。

这将使用备用字体进行第二次测量，如果产生相同的测量结果，则假定使用了备用字体，并将引发错误。

note

在 Remotion v5 中，这将成为默认设置。

匹配所有字体属性​

在测量文本时，请确保所有字体属性与您将在视频中使用的属性匹配。
这包括 fontFamily、fontSize、fontWeight、letterSpacing 和 fontVariantNumeric。

您可以创建可重用的变量，然后在测量函数和实际组件中引用这些变量。

使用变量设置字体属性
tsx
import { measureText } from "@remotion/layout-utils";
 
const text = "Hello world";
const fontFamily = "Inter";
const fontWeight = "bold";
const fontSize = 16;
 
// Use the variable in the measurement function:
measureText({
  text,
  fontFamily,
  fontWeight,
  fontSize,
});
 
// As well as in markup
<div style={{ fontFamily, fontWeight, fontSize }}>{text}</div>;
使用变量设置字体属性
tsx
import { measureText } from "@remotion/layout-utils";
 
const text = "Hello world";
const fontFamily = "Inter";
const fontWeight = "bold";
const fontSize = 16;
 
// Use the variable in the measurement function:
measureText({
  text,
  fontFamily,
  fontWeight,
  fontSize,
});
 
// As well as in markup
<div style={{ fontFamily, fontWeight, fontSize }}>{text}</div>;

注意边框和填充​

向单词添加 padding 或 border 将使测量结果偏离。
完全避免使用 padding，使用单词之间的自然间距。
而不是 border，使用 outline 在文本外部添加一条线而不影响其布局。

空格​

在测量时，布局工具会将文本包装在一个带有 display: inline-block 和 white-space: pre 样式的 <span> 中。
这样也会测量空格字符的宽度。

在您的标记中添加这两个 CSS 属性，以便与测量结果匹配。

服务器端渲染​

布局工具需要在浏览器中运行。
如果您要在将在服务器端渲染的组件中使用它们，则建议您在 useEffect 中调用这些函数，就像本页面上的第一个示例一样。