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/ko/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 라우트](/ko/guides/endpoints/#서버-엔드포인트-api-라우트)에서 사용하거나, 자체 메타 태그를 생성하는 것과 같이 프로그래밍 방식으로 저수준 글꼴 패밀리 데이터를 가져오기 위한 것입니다.

### `getFontData()`
<p>

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

지정된 [`cssVariable`](#cssvariable-1)에 대한 `src`, `weight`, `style`을 포함하는 `FontData` 객체의 배열을 반환합니다.

다음은 [satori](https://github.com/vercel/satori)를 사용하여 OpenGraph 이미지를 생성할 때 URL로부터 글꼴 버퍼를 가져오기 위해 `getFontData()`를 사용하는 예시입니다.

```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 @@ -801,4 +844,4 @@ Astro 글꼴 제공자는 구성 객체와 실제 구현의 두 부분으로 구

## 더 읽을거리

이 실험적인 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)를 참조하세요.