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() 来开始加载过程。默认情况下,会加载每种样式、权重和子集。

您可以传递一个样式(如 normalitalic)来仅加载该特定样式。如果需要多个样式,请多次调用 loadFont()

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

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

加载特定样式并限制权重和子集
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