Skip to main content

measureText()

属于 @remotion/layout-utils 软件包的一部分.

🌐 Part of the @remotion/layout-utils package.

计算指定文本的宽度和高度，用于布局计算。仅在浏览器中有效，在 Node.js 或 Bun 中无效。

🌐 Calculates the width and height of specified text to be used for layout calculations. Only works in the browser, not in Node.js or Bun.

示例​

🌐 Example

import {measureText} from '@remotion/layout-utils';

const text = 'remotion';
const fontFamily = 'Arial';
const fontWeight = '500';
const fontSize = 12;
const letterSpacing = '1px';

measureText({
  text,
  fontFamily,
  fontWeight,
  fontSize,
  letterSpacing,
}); // { height: 14, width: 20 }

应用编程接口​

🌐 API

这个函数有一个缓存。如果有两个重复的参数输入，第二个将直接返回第一个结果，而不会重复计算。

🌐 This function has a cache. If there are two duplicate arguments inputs, the second one will return the first result without repeating the calculation.

该函数接受以下选项：

🌐 The function takes the following options:

text​

string

任何字符串。

🌐 Any string.

fontFamily​

string

与 CSS 样式 font-family 相同

🌐 Same as CSS style font-family

fontSize​

数字 / 字符串

🌐 number / string

与 CSS 样式 font-size 相同。从 v4.0.125 起，也允许字符串，以前只允许数字。

🌐 Same as CSS style font-size. Since v4.0.125, strings are allowed too, before only numbers.

fontWeight​

string

与 CSS 样式 font-weight 相同

🌐 Same as CSS style font-weight

letterSpacing​

string

与 CSS 样式 letter-spacing 相同。

🌐 Same as CSS style letter-spacing.

fontVariantNumericv4.0.57​

string

与 CSS 样式 font-variant-numeric 相同。

🌐 Same as CSS style font-variant-numeric.

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

一个具有 height 和 width 的对象

🌐 An object with height and width

重要考虑事项​

🌐 Important considerations

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

🌐 See Best practices to ensure you get correct measurements.

另请参阅​

🌐 See also

Last updated on