Skip to main content

fitText()

属于 @remotion/layout-utils 包。从 v4.0.88 版本开始可用

计算适合给定宽度的文本所需的 font-size。

FitText.tsx
tsx
import { fitText } from "@remotion/layout-utils";
 
const text = "Hello World";
const width = 100;
const fontFamily = "Arial";
const fontWeight = "bold";
 
const { fontSize } = fitText({
  text,
  withinWidth: width,
  fontFamily: fontFamily,
  fontWeight: fontWeight,
  textTransform: "uppercase",
});
 
// Example markup:
<div
  style={{
    fontSize,
    width,
    fontFamily,
    fontWeight,
    textTransform: "uppercase",
  }}
>
  {text}
</div>;
FitText.tsx
tsx
import { fitText } from "@remotion/layout-utils";
 
const text = "Hello World";
const width = 100;
const fontFamily = "Arial";
const fontWeight = "bold";
 
const { fontSize } = fitText({
  text,
  withinWidth: width,
  fontFamily: fontFamily,
  fontWeight: fontWeight,
  textTransform: "uppercase",
});
 
// Example markup:
<div
  style={{
    fontSize,
    width,
    fontFamily,
    fontWeight,
    textTransform: "uppercase",
  }}
>
  {text}
</div>;

API​

接受具有以下属性的对象：

text​

string

要适应的文本。

withinWidth​

number

要适应文本的宽度。

info

在默认的 Remotion 样式表中，由于 box-sizing: border-box，边框会使容器收缩。
减去任何边框，或者使用 outline 而不是 border。

fontFamily​

string

您将分配给文本的 font-family CSS 属性。

info

在调用此 API 之前，需要加载字体。
如果您使用 @remotion/google-fonts，请等到 waitUntilDone() 解析完成。

fontWeight​

string | number, optional

如果要为文本分配 font-weight CSS 属性，则传递此选项。

letterSpacing​

string, optional

如果要为文本分配 letter-spacing CSS 属性，则传递此选项。

fontVariantNumeric​

string, optional

如果要为文本分配 font-variant-numeric CSS 属性，则传递此选项。

textTransformv4.0.140​

string

与 CSS 样式 text-transform 相同。

validateFontIsLoaded?v4.0.136​

boolean

如果设置为 true，将使用回退字体进行第二次测量，如果产生相同的测量结果，则假定使用了回退字体，并将抛出错误。

additionalStylesv4.0.140​

object, optional

影响文本布局的其他 CSS 属性。

返回值​

一个具有以像素为单位的 fontSize 的对象。将其分配给文本元素的 style 属性。

示例​

tsx
import { fitText } from "@remotion/layout-utils";
import React from "react";
import { AbsoluteFill } from "remotion";
 
const boxWidth = 600;
// Must be loaded before calling fitText()
const fontFamily = "Helvetica";
const fontWeight = "bold";
 
export const FitText: React.FC<{ text: string }> = ({ text }) => {
  const fontSize = Math.min(
    80,
    fitText({
      fontFamily,
      text,
      withinWidth: boxWidth,
      fontWeight,
    }).fontSize,
  );
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "white",
      }}
    >
      <div
        style={{
          width: boxWidth,
          outline: "1px dashed rgba(0, 0, 0, 0.5)",
          height: 100,
          fontSize,
          fontWeight,
          fontFamily,
          display: "flex",
          alignItems: "center",
        }}
      >
        {text}
      </div>
    </AbsoluteFill>
  );
};
tsx
import { fitText } from "@remotion/layout-utils";
import React from "react";
import { AbsoluteFill } from "remotion";
 
const boxWidth = 600;
// Must be loaded before calling fitText()
const fontFamily = "Helvetica";
const fontWeight = "bold";
 
export const FitText: React.FC<{ text: string }> = ({ text }) => {
  const fontSize = Math.min(
    80,
    fitText({
      fontFamily,
      text,
      withinWidth: boxWidth,
      fontWeight,
    }).fontSize,
  );
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "white",
      }}
    >
      <div
        style={{
          width: boxWidth,
          outline: "1px dashed rgba(0, 0, 0, 0.5)",
          height: 100,
          fontSize,
          fontWeight,
          fontFamily,
          display: "flex",
          alignItems: "center",
        }}
      >
        {text}
      </div>
    </AbsoluteFill>
  );
};

Notes:

  • 为防止文本过大，指定了最大字体大小为 80。
  • 将 fontFamily 和 fontWeight 传递给 div 元素，以确保文本使用与 fitText() 使用的相同字体相同。
  • 使用 outline CSS 属性而不是 border。
    这是因为在 Remotion 中，默认情况下边框在内部，并且由于默认样式表中存在 box-sizing: border-box，边框会使容器收缩。

重要考虑事项​

请查看最佳实践以确保您获得正确的测量值。

另请参阅​