Skip to main content

loadFont()

属于 @remotion/google-fonts 包

加载 Google 字体 以在 Remotion 中使用。

  • 自动阻止渲染，直到字体准备就绪
  • 提供了一种缩小权重、样式和字符子集范围的方法。
  • 每个 loadFont() 调用都是类型安全的，并且可通过自动补全公开可用选项。

用法​

不带参数时，将加载字体的所有样式、权重和字符子集。

加载 Lobster 字体的所有变体
tsx
import { loadFont } from "@remotion/google-fonts/Lobster";
import { AbsoluteFill } from "remotion";
 
const { fontFamily } = loadFont();
 
export const GoogleFontsExample: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        fontFamily: fontFamily,
      }}
    >
      <h1>Google Fonts</h1>
    </AbsoluteFill>
  );
};
加载 Lobster 字体的所有变体
tsx
import { loadFont } from "@remotion/google-fonts/Lobster";
import { AbsoluteFill } from "remotion";
 
const { fontFamily } = loadFont();
 
export const GoogleFontsExample: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        fontFamily: fontFamily,
      }}
    >
      <h1>Google Fonts</h1>
    </AbsoluteFill>
  );
};

传递特定样式（例如 normal、italic）以及可选的权重和子集，以缩小加载范围。

info

大字体文件配合有限的带宽可能导致渲染超时。通过指定您需要的确切样式、权重和子集，可以减小文件大小，可能防止渲染超时。如果问题仍然存在，增加超时时间 将有所帮助。

如果要加载多个样式，请使用多个 loadFont() 语句。

加载特定样式、权重和子集
tsx
import { AbsoluteFill } from "remotion";
import { fontFamily, loadFont } from "@remotion/google-fonts/Lobster";
 
const { waitUntilDone } = loadFont("normal", {
  weights: ["400"],
  subsets: ["latin"],
});
 
// Optional: Act once the font has been loaded
waitUntilDone().then(() => {
  console.log("Font is loaded");
});
 
export const GoogleFontsExample: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        // Pass the `fontFamily` you imported as a style
        fontFamily: fontFamily,
        fontSize: 280,
      }}
    >
      <h1>Google Fonts</h1>
    </AbsoluteFill>
  );
};
加载特定样式、权重和子集
tsx
import { AbsoluteFill } from "remotion";
import { fontFamily, loadFont } from "@remotion/google-fonts/Lobster";
 
const { waitUntilDone } = loadFont("normal", {
  weights: ["400"],
  subsets: ["latin"],
});
 
// Optional: Act once the font has been loaded
waitUntilDone().then(() => {
  console.log("Font is loaded");
});
 
export const GoogleFontsExample: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        // Pass the `fontFamily` you imported as a style
        fontFamily: fontFamily,
        fontSize: 280,
      }}
    >
      <h1>Google Fonts</h1>
    </AbsoluteFill>
  );
};

参数​

所有参数和选项都是可选的。使用 TypeScript 自动补全或 getInfo 来发现可用选项。使用其中任何一个，将加载所有样式、权重和子集。

样式​

我们要加载的字体样式。虽然每种字体都有不同的样式集，常见选项包括：normal、italic 等。

选项​

权重​

可选

应加载的权重数组。默认情况下，加载所有权重。

子集​

可选

应加载的字体子集数组。默认情况下，加载所有子集。

文档​

可选

允许您指定一个 Document。如果要将字体注入到 iframe 中，您需要给它一个引用，并将 iframeRef.contentDocument 传递给此参数。默认情况下，使用全局 window.document。

返回值​

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

fontFamily​

字体系列名称，可用作 fontFamily CSS 属性。

fonts​

有关字体的变体信息。

示例数值
js
{
  normal: {
    '400': {
      'latin-ext': 'https://fonts.gstatic.com/s/titanone/v13/mFTzWbsGxbbS_J5cQcjCmjgm6Es.woff2',
      'latin': 'https://fonts.gstatic.com/s/titanone/v13/mFTzWbsGxbbS_J5cQcjClDgm.woff2',
    },
  },
}
示例数值
js
{
  normal: {
    '400': {
      'latin-ext': 'https://fonts.gstatic.com/s/titanone/v13/mFTzWbsGxbbS_J5cQcjCmjgm6Es.woff2',
      'latin': 'https://fonts.gstatic.com/s/titanone/v13/mFTzWbsGxbbS_J5cQcjClDgm.woff2',
    },
  },
}

unicodeRanges​

有关字体的 Unicode 范围信息。

示例数值
js
{
  'latin-ext': 'U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF',
  'latin': 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
}
示例数值
js
{
  'latin-ext': 'U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF',
  'latin': 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
}

waitUntilDonev4.0.135​

返回一个在字体加载完成时解析的 Promise 的函数。

在后台加载字体
tsx
import { loadFont } from "@remotion/google-fonts/Lobster";
loadFont("normal", {
  weights: ["400"],
  subsets: ["latin"],
})
  .waitUntilDone()
  .then(() => {
    console.log("Done loading");
  });
在后台加载字体
tsx
import { loadFont } from "@remotion/google-fonts/Lobster";
loadFont("normal", {
  weights: ["400"],
  subsets: ["latin"],
})
  .waitUntilDone()
  .then(() => {
    console.log("Done loading");
  });

参见​