Skip to main content

loadFont()

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

🌐 Part of the @remotion/google-fonts package

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

🌐 Load a Google Font for use in Remotion.

  • 在字体准备好之前自动阻止渲染
  • 提供了一种缩小字体重量、样式和字符子集范围的方法。
  • 每个 loadFont() 调用都是类型安全的，并且可用选项通过自动补全显示。

用法​

🌐 Usage

如果没有参数，将加载字体的所有样式、字重和字符子集。

🌐 Without arguments, all styles, weights and character subsets of a font are being loaded.

Load all variants of the Lobster font
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），并可选择性地传入权重和子集以缩小加载的范围。

🌐 Pass a specific style (e.g. normal, italic) and optionally weights and subsets to narrow down what gets loaded.

info

一个大型字体文件配合有限的带宽可能会导致渲染超时。通过指定你需要的具体样式、字重和子集，可以减小文件大小，并可能防止渲染超时。如果问题仍然存在，增加超时时间会进一步有帮助。

如果你想加载多种样式，使用多个 loadFont() 语句。

🌐 If you want to load multiple styles, use multiple loadFont() statements.

Load a specific style, weight and subset
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>
  );
};

参数​

🌐 Arguments

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

🌐 All arguments and options are optional. Use TypeScript autocompletion or getInfo to discover available options. With any of them, all styles, weights and subsets are loaded.

style​

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

🌐 The font style we want to load. While each font has a different set of styles, common options are: normal, italic etc.

options​

weights?​

应该加载的权重数组。默认情况下，全选。

🌐 Array of weights that should be loaded. By default, all.

subsets?​

应该加载的字体子集数组。默认情况下，全部加载。

🌐 Array of font subsets that should be loaded. By default, all.

document?​

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

🌐 Allows you to specify a Document. If you want to inject the fonts into an iframe, you want to give it a ref and pass iframeRef.contentDocument to this parameter. By default, the global window.document is used.

忽略太多请求警告?v4.0.283​

🌐 ignoreTooManyRequestsWarning?v4.0.283

如果为了加载字体发出的网络请求超过20个，则会在控制台打印警告。你可以通过设置此选项来禁用该警告。

🌐 If more than 20 network requests are made to load the font, then a warning will be printed to the console.
You can disable that warning by setting this option.

返回值​

🌐 Return value

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

🌐 An object with the following properties:

fontFamily​

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

🌐 The font family name, be used as the fontFamily CSS property.

fonts​

关于字体的变体信息。

🌐 Variant information about the font.

Example value
{
  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 范围信息。

🌐 Unicode range information about the font.

Example value
{
  '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​

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

🌐 A function that returns a promise that resolves when the font is loaded.

Load a font in the background
import {loadFont} from '@remotion/google-fonts/Lobster';

loadFont('normal', {
  weights: ['400'],
  subsets: ['latin'],
})
  .waitUntilDone()
  .then(() => {
    console.log('Done loading');
  });

另请参阅​

🌐 See also

Last updated on