Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 44 additions & 1 deletion src/content/docs/zh-cn/reference/experimental-flags/fonts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -325,6 +325,49 @@ import { Font } from 'astro:assets';
<Font cssVariable="--font-roboto" preload />
```

## 以编程方式访问字体数据

`getFontData()` 函数旨在通过编程方式获取更底层的字体数据,例如在 [API 路由](/zh-cn/guides/endpoints/#服务器端点api-路由) 中使用,或用于生成自定义的元标签。

### `getFontData()`
<p>

**类型:** `(cssVariable: CssVariable) => FontData[]`<br />
<Since v="5.14.0" />
</p>

返回与指定 [`cssVariable`](#cssvariable-1) 对应的 `FontData` 对象数组,每个对象包含 `src`、`weight` 和 `style` 属性。

以下示例演示了在使用 [satori](https://github.com/vercel/satori) 生成 OpenGraph 图片时,如何通过 `getFontData()` 从 URL 获取字体缓冲区数据:

```tsx title="src/pages/og.png.ts" "getFontData(\"--font-roboto\")" "data[0].src[0].url"
import type{ APIRoute } from "astro"
import { getFontData } from "astro:assets"
import satori from "satori"

export const GET: APIRoute = (context) => {
const data = getFontData("--font-roboto")

const svg = await satori(
<div style={{ color: "black" }}>hello, world</div>,
{
width: 600,
height: 400,
fonts: [
{
name: "Roboto",
data: await fetch(new URL(data[0].src[0].url, context.url.origin)).then(res => res.arrayBuffer()),
weight: 400,
style: "normal",
},
],
},
)

// ...
}
```

## 字体配置参考

所有的字体属性都必须在 Astro 配置文件中进行配置。有些属性对于远程和本地字体来说是通用的,而其他属性则根据你选择的字体提供商提供。
Expand Down Expand Up @@ -800,4 +843,4 @@ export default defineConfig({

## 延伸阅读

有关此实验性 API 的全部详细信息或需提供反馈,请参见 [字体 RFC](https://github.com/withastro/roadmap/blob/rfc/fonts/proposals/0052-fonts.md)。
有关此实验性 API 的全部详细信息或需提供反馈,请参见 [字体 RFC](https://github.com/withastro/roadmap/blob/rfc/fonts/proposals/0055-fonts.md)。