Web Fonts preset

Google Fonts, FontShare에서 폰트 이름만 제공하여 웹 폰트를 사용하세요.

지원되는 모든 제공업체를 참조하세요.

소스 코드

설치

pnpm

pnpm add -D @unocss/preset-web-fonts

yarn

yarn add -D @unocss/preset-web-fonts

npm

npm install -D @unocss/preset-web-fonts

bun

bun add -D @unocss/preset-web-fonts

import presetWebFonts from '@unocss/preset-web-fonts'
import presetWind3 from '@unocss/preset-wind3'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetWebFonts({ /* options */ }),
  ],
})

TIP

이 preset은 unocss 패키지에 포함되어 있으며, 거기서도 가져올 수 있습니다:

import { presetWebFonts } from 'unocss'

제공업체

현재 지원되는 제공업체:

• none - 아무것도 하지 않음, 폰트를 시스템 폰트로 취급
• google - Google Fonts
• bunny - Privacy-Friendly Google Fonts
• fontshare - Quality Font Service by ITF

INFO

더 많은 제공업체 추가를 위한 PR을 환영합니다. 🙌

사용자 정의 fetch 함수

자신만의 함수를 사용하여 폰트 소스를 가져옵니다.

import presetWebFonts from '@unocss/preset-web-fonts'
import presetWind3 from '@unocss/preset-wind3'
import axios from 'axios'
import ProxyAgent from 'proxy-agent'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetWebFonts({
      // https 프록시와 함께 axios 사용
      customFetch: (url: string) => axios.get(url, { httpsAgent: new ProxyAgent('https://localhost:7890') }).then(it => it.data),
      provider: 'google',
      fonts: {
        sans: 'Roboto',
        mono: ['Fira Code', 'Fira Mono:400,700'],
      },
    }),
  ],
})

옵션

provider

• 타입: WebFontsProviders
• 기본값: google

웹 폰트의 제공업체 서비스.

type WebFontsProviders = 'google' | 'bunny' | 'fontshare' | 'none'

fonts

• 타입: Record<string, WebFontMeta | string | (WebFontMeta | string)[]>

폰트. 자세한 내용은 예시를 참조하세요.

interface WebFontMeta {
  name: string
  weights?: (string | number)[]
  italic?: boolean
  /**
   * 제공업체 재정의
   * @default <루트 설정과 일치>
   */
  provider?: WebFontsProviders
}

extendTheme

• 타입: boolean
• 기본값: true

테마 객체 확장.

themeKey

• 타입: string
• 기본값: fontFamily

테마 객체의 키.

inlineImports

• 타입: boolean
• 기본값: true

CSS @import() 인라인화.

customFetch

• 타입: (url: string) => Promise<string>
• 기본값: undefined

자신만의 함수를 사용하여 폰트 소스를 가져옵니다. 사용자 정의 fetch 함수를 참조하세요.

예시

presetWebFonts({
  provider: 'google', // 기본 제공업체
  fonts: {
    // 이것들은 기본 테마를 확장합니다
    sans: 'Roboto',
    mono: ['Fira Code', 'Fira Mono:400,700'],
    // 사용자 정의 폰트
    lobster: 'Lobster',
    lato: [
      {
        name: 'Lato',
        weights: ['400', '700'],
        italic: true,
      },
      {
        name: 'sans-serif',
        provider: 'none',
      },
    ],
  },
})

다음 CSS가 자동으로 생성됩니다:

@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Fira+Code&family=Fira+Mono:wght@400;700&family=Lobster&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* layer: default */
.font-lato {
  font-family: "Lato", sans-serif;
}
.font-lobster {
  font-family: "Lobster";
}
.font-mono {
  font-family: "Fira Code", "Fira Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: "Roboto", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
}

로컬에서 폰트 제공

기본적으로 preset은 제공업체의 CDN에서 폰트를 가져옵니다. 폰트를 로컬에서 제공하고 싶다면, @unocss/preset-web-fonts/local의 프로세서를 사용하여 폰트를 다운로드하고 자신의 서버에서 제공할 수 있습니다.

import presetWebFonts from '@unocss/preset-web-fonts'
import { createLocalFontProcessor } from '@unocss/preset-web-fonts/local'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWebFonts({
      provider: 'none',
      fonts: {
        sans: 'Roboto',
        mono: 'Fira Code',
      },
      // 이것은 폰트를 다운로드하고 로컬에서 제공합니다
      processors: createLocalFontProcessor({
        // 폰트를 캐시할 디렉토리
        cacheDir: 'node_modules/.cache/unocss/fonts',

        // 폰트 자산을 저장할 디렉토리
        fontAssetsDir: 'public/assets/fonts',

        // 클라이언트에서 폰트를 제공할 기본 URL
        fontServeBaseUrl: '/assets/fonts'
      })
    }),
  ],
})

이것은 폰트 자산을 public/assets/fonts에 다운로드하고 클라이언트에서 /assets/fonts에서 제공합니다. 이렇게 할 때는 폰트의 라이선스가 재배포를 허용하는지 확인하세요. 이 도구는 법적 문제에 대해 책임지지 않습니다.

INFO

이 기능은 Node.js 전용이며 브라우저에서는 작동하지 않습니다.