Skip to main content

fitTextOnNLines()

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

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

计算将文本适应给定宽度所需的 fontSize，同时遵守最大行数。你可以选择指定最大字体大小，并查看文本如何分成多行。

🌐 Calculates the fontSize needed to fit a text into a given width while respecting a maximum number of lines. Optionally, you can specify a maximum font size, and see how the text is split into lines.

FitTextOnNLines.tsx
import {fitTextOnNLines} from '@remotion/layout-utils';

const text = 'Hello World';
const width = 100;
const maxLines = 2;
const fontFamily = 'Arial';
const fontWeight = 'bold';

const {fontSize, lines} = fitTextOnNLines({
  text,
  maxBoxWidth: width,
  maxLines,
  fontFamily: fontFamily,
  fontWeight: fontWeight,
  textTransform: 'uppercase',
  maxFontSize: 80,
});

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

maxBoxWidth​

number

文本应适应的最大宽度。

🌐 The maximum width the text should fit into.

info

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

maxLines​

number

文本应分布的最大行数。

🌐 The maximum number of lines the text should be distributed across.

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.

textTransform​

string

与 CSS 样式 text-transform 相同。

🌐 Same as CSS style text-transform.

validateFontIsLoaded?​

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?​

object

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

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

maxFontSize?​

number

文本允许达到的最大字体大小（以像素为单位）。如果未指定，默认为2000。

🌐 The maximum font size (in pixels) that the text is allowed to reach. If not specified, defaults to 2000.

返回值​

🌐 Return value

一个具有以下属性的对象：

🌐 An object with the following properties:

fontSize​

number

以像素计算的字体大小。将此分配给文本元素的 style 属性。

🌐 The calculated font size in pixels. Assign this to the style prop of your text element.

lines​

string[]

一个字符串数组，每个字符串表示按计算字体大小显示的一行文本。用于渲染或调试文本如何被分割。

🌐 An array of strings, each representing a line of text at the calculated font size. Useful for rendering or debugging how the text is split.

示例​

🌐 Example

import {fitTextOnNLines} from '@remotion/layout-utils';
import React from 'react';
import {AbsoluteFill} from 'remotion';

const boxWidth = 600;
const maxLines = 2;
// Must be loaded before calling fitTextOnNLines()
const fontFamily = 'Helvetica';
const fontWeight = 'bold';

export const FitTextOnNLines: React.FC<{text: string}> = ({text}) => {
  const {fontSize, lines} = fitTextOnNLines({
    fontFamily,
    text,
    maxBoxWidth: boxWidth,
    maxLines,
    fontWeight,
    maxFontSize: 80,
  });

  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 元素，以确保文本以与 fitTextOnNLines() 使用的字体相同的方式呈现。
  • outline CSS 属性被使用而不是 border。这是因为在 Remotion 中，边框默认位于内部并会缩小容器，这是由于 box-sizing: border-box 在默认样式表中存在。
  • 返回值中的 lines 属性显示了文本在计算出的字体大小下如何分行。这对于渲染或调试可能很有用。
  • maxFontSize 属性允许你限制字体大小，如果你不希望文本变得太大。

重要考虑事项​

🌐 Important considerations

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

🌐 See Best practices to ensure you get correct measurements.

另请参阅​

🌐 See also

Last updated on