自定义字体

从 Web 加载字体

要使用来自 Google Fonts 等托管商的字体。首先在 src 下创建一个 css 文件

root
└─src
  ├─scenes/
  ├─motion-canvas.d.ts
  ├─project.meta
  ├─project.ts
+ └─global.css

在 global.css 中，使用 @import url(your link) 导入字体。

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');

然后，在 project.ts 中，导入 css 文件。

import {makeProject} from '@motion-canvas/core';

import example from './scenes/example?scene';

import './global.css'; // <- 导入 css

export default makeProject({
  scenes: [example],
});

现在您可以在此项目的 fontFamily 属性中引用这些字体。

<Txt fontFamily={'Fira Code'}>Fira Code</Txt>

从本地加载字体

对于本地字体，创建一个 fonts 目录并将您的字体放入其中。

root
└─public
+ └─fonts *
+   └─CASCADIACODE.TTF

在 global.css 中，使用 @font-face 导入字体。

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');

@font-face {
  font-family: 'Cascadia Code';
  src:
    local('Cascadia Code'),
    url(public/fonts/CASCADIACODE.TTF) format('truetype');
}

请注意，字体名称将与 css 中 @font-face/font-family 中的字符串匹配。

<Layout direction={'column'} alignItems={'center'} layout>
  <Txt fontFamily={'Fira Code'}>Fira Code</Txt>
  <Txt fontFamily={'Cascadia Code'}>Cascadia Code</Txt>
</Layout>