Skip to main content

loadFont()v4.0.165

属于@remotion/fonts包

加载本地字体以供在 Remotion 中使用。
自动阻止渲染，直到字体准备就绪。

用法​

MyComp.tsx
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>
  );
};
MyComp.tsx
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>
  );
};

选项​

family​

给字体一个名称。
然后可以在 CSS 中使用 fontFamily 引用该名称。

url​

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

format?​

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

ascentOverride?​

定义字体的上升度量。

descentOverride?​

定义字体的下降度量。

display?​

等效于 CSS 的 font-display 属性。
根据字体何时下载和准备好使用来确定字体如何显示。

featureSettings?​

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

lineGapOverride?​

定义字体的行间距度量。

stretch?​

等效于 CSS 的 font-stretch 属性。 指定加载的字体具有何种拉伸。

style?​

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

weight?​

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

unicodeRange?​

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

另请参阅​