Web Fonts preset

Sử dụng font web từ Google Fonts, FontShare bằng cách đơn giản cung cấp tên font.

Xem tất cả nhà cung cấp được hỗ trợ.

Mã nguồn

Cài đặt

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 này được bao gồm trong gói unocss, bạn cũng có thể import nó từ đó:

import { presetWebFonts } from 'unocss'

Nhà cung cấp

Nhà cung cấp hiện được hỗ trợ:

• none - không làm gì, coi font là font hệ thống
• google - Google Fonts
• bunny - Google Fonts thân thiện với quyền riêng tư
• fontshare - Dịch vụ font chất lượng bởi ITF

INFO

PR chào mừng để thêm nhiều nhà cung cấp hơn. 🙌

Hàm fetch tùy chỉnh

Sử dụng hàm riêng của bạn để tìm nguồn font.

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({
      // use axios with an https proxy
      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'],
      },
    }),
  ],
})

Tùy chọn

provider

• Kiểu: WebFontsProviders
• Mặc định: google

Dịch vụ nhà cung cấp của font web.

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

fonts

• Kiểu: Record<string, WebFontMeta | string | (WebFontMeta | string)[]>

Các font. Xem ví dụ để biết thêm chi tiết.

interface WebFontMeta {
  name: string
  weights?: (string | number)[]
  italic?: boolean
  /**
   * Ghi đè nhà cung cấp
   * @default <matches root config>
   */
  provider?: WebFontsProviders
}

extendTheme

• Kiểu: boolean
• Mặc định: true

Mở rộng đối tượng chủ đề.

themeKey

• Kiểu: string
• Mặc định: fontFamily

Khóa cho đối tượng chủ đề.

inlineImports

• Kiểu: boolean
• Mặc định: true

Nội tuyến @import() CSS.

customFetch

• Kiểu: (url: string) => Promise<string>
• Mặc định: undefined

Sử dụng hàm riêng của bạn để tìm nguồn font. Xem Hàm fetch tùy chỉnh.

Ví dụ

presetWebFonts({
  provider: 'google', // default provider
  fonts: {
    // these will extend the default theme
    sans: 'Roboto',
    mono: ['Fira Code', 'Fira Mono:400,700'],
    // custom ones
    lobster: 'Lobster',
    lato: [
      {
        name: 'Lato',
        weights: ['400', '700'],
        italic: true,
      },
      {
        name: 'sans-serif',
        provider: 'none',
      },
    ],
  },
})

CSS sau sẽ được tạo tự động:

@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";
}

Phục vụ Font Cục bộ

Theo mặc định, preset sẽ tìm nạp font từ CDN của nhà cung cấp. Nếu bạn muốn phục vụ font cục bộ, bạn có thể tải xuống font và phục vụ chúng từ máy chủ riêng của bạn bằng trình xử lý từ @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',
      },
      // This will download the fonts and serve them locally
      processors: createLocalFontProcessor({
        // Directory to cache the fonts
        cacheDir: 'node_modules/.cache/unocss/fonts',

        // Directory to save the fonts assets
        fontAssetsDir: 'public/assets/fonts',

        // Base URL to serve the fonts from the client
        fontServeBaseUrl: '/assets/fonts'
      })
    }),
  ],
})

Điều này sẽ tải xuống tài nguyên font vào public/assets/fonts và phục vụ chúng từ /assets/fonts trên client. Khi làm điều này, vui lòng đảm bảo giấy phép của font cho phép bạn phân phối lại như vậy, công cụ không chịu trách nhiệm cho bất kỳ vấn đề pháp lý nào.

INFO

Tính năng này dành riêng cho Node.js và sẽ không hoạt động trong trình duyệt.