Skip to main content

fitText()

属于 @remotion/layout-utils 包。从 v4.0.88 起可用

🌐 Part of the @remotion/layout-utils package. Available from v4.0.88

计算将文本适应指定宽度所需的 font-size。

🌐 Calculates the font-size needed to fit a text into a given width.

FitText.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

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

🌐 Accepts an object with the following properties:

text​

string

适合的文本。

🌐 The text to fit.

withinWidth​

number

适合文本的宽度。

🌐 The width to fit the text into.

info

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

fontFamily​

string

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

🌐 The font-family CSS property you are going to assign to the text.

info

在调用此 API 之前，需要先加载字体。
如果你使用 @remotion/google-fonts，请先等待 waitUntilDone() 解决。

fontWeight?​

字符串 | 数字

🌐 string | number

如果你打算将 font-weight CSS 属性分配给文本，请通过此选项。

🌐 Pass this option if you are going to assign a font-weight CSS property to the text.

letterSpacing?​

string

如果你打算将 letter-spacing CSS 属性分配给文本，请通过此选项。

🌐 Pass this option if you are going to assign a letter-spacing CSS property to the text.

fontVariantNumeric?​

string

如果你打算将 font-variant-numeric CSS 属性分配给文本，请通过此选项。

🌐 Pass this option if you are going to assign a font-variant-numeric CSS property to the text.

textTransformv4.0.140​

string

与 CSS 样式 text-transform 相同。

🌐 Same as CSS style text-transform.

validateFontIsLoaded?v4.0.136​

boolean

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

🌐 If set to true, will take a second measurement with the fallback font and if it produces the same measurements, it assumes the fallback font was used and will throw an error.

additionalStyles?v4.0.140​

object

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

🌐 Additional CSS properties that affect the layout of the text.

返回值​

🌐 Return value

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

🌐 An object with fontSize in pixels. Assign this to the style prop of your text element.

示例​

🌐 Example

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 在默认样式表中存在。

重要考虑事项​

🌐 Important considerations

请参阅最佳实践以确保你获得正确的测量结果。

🌐 See Best practices to ensure you get correct measurements.

另请参阅​

🌐 See also

Last updated on