@remotion/google-fonts
@remotion/google-fonts
包提供了用于轻松集成 Google Fonts 到 Remotion 中的 API。
安装
- npm
- yarn
- pnpm
bash
npm i @remotion/google-fonts
bash
npm i @remotion/google-fonts
bash
yarn add @remotion/google-fonts
bash
yarn add @remotion/google-fonts
bash
pnpm i @remotion/google-fonts
bash
pnpm 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 * asMontserrat from "@remotion/google-fonts/Montserrat";Montserrat .loadFont ();
范围 loadFont() 变量tsx
import * asMontserrat 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 * asMontserrat from "@remotion/google-fonts/Montserrat";Montserrat .loadFont ("normal", {weights : ["400", "600", "800"],subsets : ["latin", "latin-ext"],});
加载特定样式并限制权重和子集tsx
import * asMontserrat 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 constGoogleFontsDemoComposition = () => {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 constGoogleFontsDemoComposition = () => {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