Skip to main content

loadFont()v4.0.165

属于 @remotion/fonts 软件包的一部分

🌐 Part of the @remotion/fonts package

加载本地字体以在 Remotion 中使用。 在字体准备好之前会自动阻止渲染。

🌐 Load a local font for use in Remotion.
Automatically blocks the render until the font is ready.

用法​

🌐 Usage

MyComp.tsx
import { loadFont } from "@remotion/fonts";
import { AbsoluteFill, staticFile } from "remotion";

loadFont({
  family: "Bangers",
  url: staticFile("bangers.ttf"),
}).then(() => console.log("Font loaded!"));

export const GoogleFontsExample: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        fontFamily: "Bangers",
      }}
    >
      <h1>Local Font</h1>
    </AbsoluteFill>
  );
};

选项​

🌐 Options

family​

给这个家族取一个名字。 你可以在 CSS 中使用 fontFamily 来引用这个名字。

🌐 Give the family a name.
You can then reference that name in your CSS using fontFamily.

url​

从哪里加载字体。可以使用本地文件 staticFile() 或 URL。

🌐 Where to load the font from. Can be a local file using staticFile() or a URL.

format?​

定义字体文件的格式。默认情况下，从 URL 的文件扩展名派生。
可以显式覆盖为以下值之一：woff2、woff、opentype、truetype。

🌐 Defines the format of the font file. By default gets derived from the file extension of the URL.
Override with one of the following values explicitly: woff2, woff, opentype, truetype.

ascentOverride?​

定义字体的上升度量。

🌐 Defines the ascent metric for the font.

descentOverride?​

定义字体的下行度量。

🌐 Defines the descent metric for the font.

display?​

等同于 CSS font-display 属性。
根据字体是否以及何时下载并准备好使用来确定字体的显示方式。

🌐 Equivalent to the CSS font-display property.
Determines how a font face is displayed based on whether and when it is downloaded and ready to use.

featureSettings?​

等同于 CSS font-feature-settings 属性。允许控制 OpenType 字体中的高级排版特性。

🌐 Equivalent to the CSS font-feature-settings property. Allows control over advanced typographic features in OpenType fonts.

lineGapOverride?​

定义字体的行间距度量。

🌐 Defines the line gap metric for the font.

stretch?​

等同于 CSS font-stretch 属性。指定加载的字体具有哪种伸展类型。

🌐 Equivalent to the CSS font-stretch property. Specify what kind of stretch the loaded font has.

style?​

等同于 CSS font-style 属性。指定加载的字体具有哪种样式。

🌐 Equivalent to the CSS font-style property. Specify what kind of style the loaded font has.

weight?​

等同于 CSS font-weight 属性。指定加载的字体具有哪种权重。

🌐 Equivalent to the CSS font-weight property. Specify what kind of weight the loaded font has.

unicodeRange?​

要从字体中使用的 Unicode 代码点范围。

🌐 The range of Unicode code points to be used from the font.

另请参阅​

🌐 See also

Last updated on