Skip to main content

@remotion/google-fonts

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

安装​

bash
npm i @remotion/google-fonts
bash
npm i @remotion/google-fonts

使用​

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

加载所有字体样式
tsx
import { loadFont } from "@remotion/google-fonts/TitanOne";
const { fontFamily } = loadFont(); // "Titan One"
加载所有字体样式
tsx
import { loadFont } from "@remotion/google-fonts/TitanOne";
const { fontFamily } = loadFont(); // "Titan One"

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

范围 loadFont() 变量
tsx
import * as Montserrat from "@remotion/google-fonts/Montserrat";
Montserrat.loadFont();
范围 loadFont() 变量
tsx
import * as Montserrat from "@remotion/google-fonts/Montserrat";
Montserrat.loadFont();

调用 loadFont() 来开始加载过程。默认情况下，会加载每种样式、权重和子集。

您可以传递一个样式（如 normal、italic）来仅加载该特定样式。如果需要多个样式，请多次调用 loadFont()。

仅加载一个样式
tsx
import { loadFont } from "@remotion/google-fonts/TitanOne";
 
loadFont("normal");
仅加载一个样式
tsx
import { loadFont } from "@remotion/google-fonts/TitanOne";
 
loadFont("normal");

使用 TypeScript 自动完成来查看可用样式。为了进一步缩小加载范围，您可以指定 weights 和 subsets。这些选项也是类型安全的。

加载特定样式并限制权重和子集
tsx
import * as Montserrat from "@remotion/google-fonts/Montserrat";
 
Montserrat.loadFont("normal", {
  weights: ["400", "600", "800"],
  subsets: ["latin", "latin-ext"],
});
加载特定样式并限制权重和子集
tsx
import * as Montserrat from "@remotion/google-fonts/Montserrat";
 
Montserrat.loadFont("normal", {
  weights: ["400", "600", "800"],
  subsets: ["latin", "latin-ext"],
});

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

使用 fontFamily 属性
tsx
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>
  );
};
使用 fontFamily 属性
tsx
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() 函数：

获取字体信息
tsx
import { getInfo } from "@remotion/google-fonts/Montserrat";
console.log(getInfo());
获取字体信息
tsx
import { getInfo } from "@remotion/google-fonts/Montserrat";
console.log(getInfo());
info 对象的示例值
json
{
  "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"
      }
    }
  }
}
info 对象的示例值
json
{
  "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"
      }
    }
  }
}

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

ts
import { getAvailableFonts } from "@remotion/google-fonts";
 
console.log(getAvailableFonts());
ts
import { getAvailableFonts } from "@remotion/google-fonts";
 
console.log(getAvailableFonts());

APIs​

Credits​

Implemented by Hidayatullah.

License​

MIT

See also​