Skip to main content

measureText()

属于 @remotion/layout-utils 包。

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

示例​

tsx
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 }
tsx
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​

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

该函数接受以下选项：

text​

必需 字符串

任意字符串。

fontFamily​

必需 字符串

与 CSS 样式 font-family 相同

fontSize​

必需 数字 / 字符串

与 CSS 样式 font-size 相同。自 v4.0.125 起，也允许字符串，之前仅允许数字。

fontWeight​

字符串

与 CSS 样式 font-weight 相同

letterSpacing​

字符串

与 CSS 样式 font-spacing 相同。

fontVariantNumericv4.0.57​

字符串

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

textTransformv4.0.140​

字符串

与 CSS 样式 text-transform 相同。

validateFontIsLoaded?v4.0.136​

布尔值

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

additionalStylesv4.0.140​

对象，可选

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

返回值​

一个具有 height 和 width 的对象

重要考虑事项​

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

另请参阅​