Skip to main content

@remotion/google-fonts

@remotion/google-fonts 包提供了将 Google Fonts 轻松集成到 Remotion 的 API。

🌐 The @remotion/google-fonts package provides APIs for easily integrating Google Fonts into Remotion.

安装​

🌐 Installation

npm i @remotion/google-fonts

用法​

🌐 Usage

要加载字体，导入包 @remotion/google-fonts/<FontName> 并调用 loadFont()。

🌐 To load a font, import the package @remotion/google-fonts/<FontName> and call loadFont().

Load all font styles
import {loadFont} from '@remotion/google-fonts/TitanOne';
const {fontFamily} = loadFont(); // "Titan One"

如果你想导入多个字体并且想避免变量名冲突，你可以使用 import * as 语句导入字体。

🌐 If you want to import multiple fonts and want to avoid a variable name collision, you can import the fonts using an import * as statement.

Scope loadFont() variable
import * as Montserrat from '@remotion/google-fonts/Montserrat';
Montserrat.loadFont();

调用 loadFont() 来开始加载过程。默认情况下，会加载所有的样式、字重和子集。

🌐 Call loadFont() to start the loading process. By default, every style, weight and subset is loaded.

你可以传递一个样式（例如 normal、italic）来只加载那个特定的样式。如果你想要多种样式，可以多次调用 loadFont()。

🌐 You can pass a style (such as normal, italic) to only load that specific style. If you want multiple styles, call loadFont() multiple times.

Load just one style
import {loadFont} from '@remotion/google-fonts/TitanOne';

loadFont('normal');

使用 TypeScript 自动补齐查看可用的样式。要进一步缩小正在加载的内容范围，你可以指定 weights 和 subsets。这些选项也是类型安全的。

🌐 Use the TypeScript autocomplete to see the available styles. To further narrow down what's being loaded, you can specify weights and subsets. These options are also typesafe.

Load a specific style with limit weights and subsets
import * as Montserrat from '@remotion/google-fonts/Montserrat';

Montserrat.loadFont('normal', {
  weights: ['400', '600', '800'],
  subsets: ['latin', 'latin-ext'],
});

loadFont() 返回一个带有 fontFamily 属性的对象。你可以使用 style 属性在你加载的字体中渲染文本。

Use the fontFamily property
import {loadFont} from '@remotion/google-fonts/TitanOne';
import {AbsoluteFill} from 'remotion';

const {fontFamily} = loadFont();

export const GoogleFontsDemoComposition = () => {
  return (
    <AbsoluteFill
      style={{
        fontFamily,
      }}
    >
      <div>Hallo Google Fonts</div>
    </AbsoluteFill>
  );
};

要获取有关字体的信息，你可以导入 getInfo() 函数：

🌐 To get information about a font, you can import the getInfo() function:

Get info about the font
import {getInfo} from '@remotion/google-fonts/Montserrat';
console.log(getInfo());
Example value of info object
{
  "fontFamily": "Titan One",
  "importName": "TitanOne",
  "version": "v13",
  "url": "https://fonts.googleapis.com/css2?family=Titan+One:ital,wght@0,400",
  "unicodeRanges": {
    "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"
  },
  "fonts": {
    "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"
      }
    }
  },
  "subsets": ["latin", "latin-ext"]
}

要获取所有可用字体的列表，你可以调用从 @remotion/google-fonts 导入的 getAvailableFonts() ：

🌐 To get a list of all available fonts, you can call getAvailableFonts() imported from @remotion/google-fonts:

import {getAvailableFonts} from '@remotion/google-fonts';

console.log(getAvailableFonts());

应用接口​

🌐 APIs

故障排除​

🌐 Troubleshooting

已知问题：

🌐 Known issues:

鸣谢​

🌐 Credits

由 Hidayatullah 实现。

🌐 Implemented by Hidayatullah.

许可证​

🌐 License

MIT

另请参阅​

🌐 See also

Last updated on