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
39 changes: 38 additions & 1 deletion src/content/docs/ko/reference/experimental-flags/fonts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -507,7 +507,7 @@ optimizedFallbacks: false

### 원격 글꼴 속성

원격 글꼴에 대한 추가 구성 옵션을 사용할 수 있습니다. 예를 들어 특정 글꼴 두께나 스타일만 다운로드하는 등, [글꼴 제공자](#사용-가능한-원격-글꼴-제공자)로부터 로드되는 데이터를 사용자 정의하려면 이러한 옵션을 설정하세요.
원격 글꼴에 대한 추가 구성 옵션을 사용할 수 있습니다. 예를 들어 특정 글꼴 두께나 스타일만 다운로드하는 등, [글꼴 제공자](#사용-가능한-원격-글꼴-제공자)로부터 로드되는 데이터를 사용자 정의하려면 이러한 옵션을 설정하세요. 더 세부적인 제어를 위해 [세분화된 구성](#세분화된-원격-글꼴-구성)을 사용할 수 있습니다.

내부적으로 이러한 옵션은 [unifont](https://github.com/unjs/unifont/)에 의해 처리됩니다. 일부 속성은 일부 제공업체에서 지원되지 않을 수 있으며, 각 제공업체에서 다르게 처리될 수 있습니다.

Expand Down Expand Up @@ -787,6 +787,43 @@ export default defineConfig({
});
```

## 세분화된 원격 글꼴 구성

<p>

<Since v="5.15.6" />
</p>

글꼴 패밀리는 두께와 스타일과 같은 속성의 조합으로 정의됩니다(예: `weights: [500, 600]` 및 `styles: ["normal", "bold"]`). 하지만 이러한 속성들의 특정 조합만 다운로드하고 싶을 수 있습니다.

어떤 글꼴 파일을 다운로드할지 더 세부적으로 제어하기 위해 동일한 글꼴(동일한 `cssVariable`, `name`, `provider` 속성 사용)을 다른 조합으로 여러 번 지정할 수 있습니다. Astro는 결과를 병합하고 필요한 파일만 다운로드합니다. 예를 들어, normal `500` 및 `600` 두께를 다운로드하면서 italic `500`만 다운로드하는 것이 가능합니다.

```js
// astro.config.mjs
import { defineConfig, fontProviders } from "astro/config"

export default defineConfig({
experimental: {
fonts: [
{
name: "Roboto",
cssVariable: "--roboto",
provider: fontProviders.google(),
weights: [500, 600],
styles: ["normal"]
},
{
name: "Roboto",
cssVariable: "--roboto",
provider: fontProviders.google(),
weights: [500],
styles: ["italic"]
}
]
}
})
```

## 나만의 글꼴 제공자 구축하기

[내장된 제공자](#사용-가능한-원격-글꼴-제공자) 중 하나를 사용하고 싶지 않다면 (예: 타사 unifont 제공자를 사용하거나 개인 레지스트리를 위해 무언가를 구축하려는 경우) 직접 구축할 수 있습니다.
Expand Down