Skip to main content

编辑器初学者字体

编辑器入门版配备了多种功能，用于控制文本和字幕项目使用的字体。 字体堆栈在 @remotion/google-fonts 上实现。

🌐 The Editor Starter comes with various features for controlling which fonts are used by the text and caption items.
The font stack is implemented on @remotion/google-fonts.

支持的字体功能​

🌐 Supported font features

  • 更改字体系列（"Helvetica" / "Roboto"）
  • 更改字体样式（“常规” / “加粗” / “斜体”）
  • 更改字体大小
  • 更改文本颜色
  • 更改字体描边（宽度和颜色）
  • 更改行高
  • 更改字母间距
  • 更改文本对齐方式（“左对齐”/“居中”/“右对齐”）
  • 更改文本方向（以支持像阿拉伯语这样的从右到左的语言）

文本控件大多集中在TextInspector组件中。

🌐 The controls for text are mostly collected in the TextInspector component.

默认字体系列​

🌐 Default font families

默认情况下，Google Fonts 中最受欢迎的前 250 种字体 已包含在字体选择器中。
此外，TikTok Sans 被添加，因为它是 TikTok 的默认字体。

🌐 By default, the top 250 most popular fonts from the Google Fonts catalog are included in the font selector.
In addition, TikTok Sans was added, because it is the default font for TikTok.

更改默认字体系列​

🌐 Changing the default font families

将脚本 generate-google-font-info.ts 更改为包含你想要包含的字体。

🌐 Change the script generate-google-font-info.ts to include the fonts you want to include.

查看 字体选择器文档，例如获取更多字体的列表。

🌐 See the font picker docs to for example get a list of more fonts.

然后运行：

🌐 Then run:

bun src/scripts/generate-google-font-info.ts

在 src/editor/data 中重新生成所需的文件。

🌐 To regenerate the necessary files in src/editor/data.

懒加载字体元数据​

🌐 Lazy-loading font metadata

每种字体都有元数据，包括可用的字体系列、字体样式、字体粗细、字体显示、字体子集、字体变体以及字体文件的链接。

🌐 Every font has metadata which includes the available font family, font style, font weight, font display, font subsets, font variations, and links to the font files.

将所有这些元数据存储在客户端对于所有 250 个默认字体来说，已经会导致打包包大小增加 10MB。

🌐 Storing all of this metadata on the client for all of the 250 default fonts would already result in a bundle size increase of 10MB.

因此，字体元数据被存储在后端，并且仅加载所需字体的元数据到客户端。这就是 GET /api/font/:name 端点存在的原因。

🌐 Because of this, font metadata is being stored in the backend and only the metadata of the fonts that are required are loaded to the client. This is the reason for the GET /api/font/:name endpoint.

字体下拉菜单中的预览​

🌐 Previews in the font dropdown

字体下拉菜单中的每个字体系列都以该字体本身的样式显示。 为此，会从 Google Fonts CDN 加载一个特殊的字体文件，该文件仅包含渲染该字体系列所需的字符。

🌐 Each font family in the font dropdown is rendered in the font itself.
For this, a special font file is loaded from the Google Fonts CDN which only contains the characters that are needed to render the font family.

查看 FEATURE_FONT_FAMILY_DROPDOWN_RENDER_IN_FONT 功能以了解其工作原理。

🌐 See the FEATURE_FONT_FAMILY_DROPDOWN_RENDER_IN_FONT feature to see how it works.

悬停以预览字体系列​

🌐 Hover to preview font family

当鼠标悬停在字体下拉菜单中的某一项时，画布中的文本项目会更新，预览如果选择悬停项该文本会是什么样子。

🌐 When hovering over an item in the font dropdown, the text item in the canvas updates with a preview of what the item would look like if the hovered item was selected.

查看 FEATURE_FONT_FAMILY_DROPDOWN_HOVER_PREVIEW 功能以了解它如何工作。

🌐 See the FEATURE_FONT_FAMILY_DROPDOWN_HOVER_PREVIEW feature to see how it works.

自定义字体​

🌐 Custom fonts

在编辑器入门版中，不支持从除 Google Fonts 之外的其他来源加载字体。 你需要重构编辑器入门版才能够从其他来源加载字体。我们建议使用 @remotion/fonts 来实现这一点。

🌐 Loading fonts from another source than Google Fonts is not foreseen in the Editor Starter.
You will have to refactor the Editor Starter to be able to load fonts from other sources. We recommend using @remotion/fonts for this.

Last updated on