Skip to content

Commit 18b407a

Browse files
i18n(zh-cn): Update fonts.mdx (withastro#12526)
Co-authored-by: Yan <[email protected]>
1 parent 32f2449 commit 18b407a

File tree

1 file changed

+44
-1
lines changed
  • src/content/docs/zh-cn/reference/experimental-flags

1 file changed

+44
-1
lines changed

src/content/docs/zh-cn/reference/experimental-flags/fonts.mdx

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,6 +325,49 @@ import { Font } from 'astro:assets';
325325
<Font cssVariable="--font-roboto" preload />
326326
```
327327

328+
## 以编程方式访问字体数据
329+
330+
`getFontData()` 函数旨在通过编程方式获取更底层的字体数据,例如在 [API 路由](/zh-cn/guides/endpoints/#服务器端点api-路由) 中使用,或用于生成自定义的元标签。
331+
332+
### `getFontData()`
333+
<p>
334+
335+
**类型:** `(cssVariable: CssVariable) => FontData[]`<br />
336+
<Since v="5.14.0" />
337+
</p>
338+
339+
返回与指定 [`cssVariable`](#cssvariable-1) 对应的 `FontData` 对象数组,每个对象包含 `src``weight``style` 属性。
340+
341+
以下示例演示了在使用 [satori](https://github.com/vercel/satori) 生成 OpenGraph 图片时,如何通过 `getFontData()` 从 URL 获取字体缓冲区数据:
342+
343+
```tsx title="src/pages/og.png.ts" "getFontData(\"--font-roboto\")" "data[0].src[0].url"
344+
import type{ APIRoute } from "astro"
345+
import { getFontData } from "astro:assets"
346+
import satori from "satori"
347+
348+
export const GET: APIRoute = (context) => {
349+
const data = getFontData("--font-roboto")
350+
351+
const svg = await satori(
352+
<div style={{ color: "black" }}>hello, world</div>,
353+
{
354+
width: 600,
355+
height: 400,
356+
fonts: [
357+
{
358+
name: "Roboto",
359+
data: await fetch(new URL(data[0].src[0].url, context.url.origin)).then(res => res.arrayBuffer()),
360+
weight: 400,
361+
style: "normal",
362+
},
363+
],
364+
},
365+
)
366+
367+
// ...
368+
}
369+
```
370+
328371
## 字体配置参考
329372

330373
所有的字体属性都必须在 Astro 配置文件中进行配置。有些属性对于远程和本地字体来说是通用的,而其他属性则根据你选择的字体提供商提供。
@@ -800,4 +843,4 @@ export default defineConfig({
800843
801844
## 延伸阅读
802845
803-
有关此实验性 API 的全部详细信息或需提供反馈,请参见 [字体 RFC](https://github.com/withastro/roadmap/blob/rfc/fonts/proposals/0052-fonts.md)。
846+
有关此实验性 API 的全部详细信息或需提供反馈,请参见 [字体 RFC](https://github.com/withastro/roadmap/blob/rfc/fonts/proposals/0055-fonts.md)。

0 commit comments

Comments
 (0)