UnoCSS 中文网

主题

网页字体预设 ​

🌐 Web Fonts preset

只需提供字体名称，即可使用来自 Google Fonts、FontShare 的网页字体。

🌐 Use web fonts from Google Fonts, FontShare by simply providing the font names.

查看所有支持的提供商。

🌐 See all supported providers.

源代码

安装 ​

🌐 Installation

bash
pnpm add -D @unocss/preset-web-fonts
bash
yarn add -D @unocss/preset-web-fonts
bash
npm install -D @unocss/preset-web-fonts
bash
bun add -D @unocss/preset-web-fonts
uno.config.ts
ts
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

此预设包含在 unocss 包中，你也可以从那里导入它：

ts
import { presetWebFonts } from 'unocss'

浏览器 ​

🌐 Providers

目前支持的提供商：

🌐 Currently supported Providers:

INFO

欢迎 PR 添加更多提供者。🙌

自定义获取函数 ​

🌐 Custom fetch function

使用你自己的函数来获取字体源。

🌐 Use your own function to fetch font source.

uno.config.ts
ts
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'],
      },
    }),
  ],
})

选项 ​

🌐 Options

provider ​

  • 类型: WebFontsProviders
  • 默认: google

网络字体的提供商服务。

🌐 Provider service of the web fonts.

ts
type WebFontsProviders = 'google' | 'bunny' | 'fontshare' | 'fontsource' | 'coollabs' | 'none'

fonts ​

  • 类型: Record<string, WebFontMeta | string | (WebFontMeta | string)[]>

字体。更多详情请参见 示例。

🌐 The fonts. See example for more details.

ts
interface WebFontMeta {
  name: string
  weights?: (string | number)[]
  italic?: boolean
  /**
   * Override the provider
   * @default <matches root config>
   */
  provider?: WebFontsProviders
}

extendTheme ​

  • 类型: boolean
  • 默认: true

扩展主题对象。

🌐 Extend the theme object.

themeKey ​

  • 类型: string
  • 默认: fontFamily

主题对象的键。

🌐 Key for the theme object.

inlineImports ​

  • 类型: boolean
  • 默认: true

内联 CSS @import()。

🌐 Inline CSS @import().

customFetch ​

  • 类型: (url: string) => Promise<string>
  • 默认: undefined

使用你自己的函数来获取字体资源。详见 自定义获取函数 。

🌐 Use your own function to fetch font source. See Custom fetch function.

示例 ​

🌐 Example

ts
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：

🌐 The following CSS will be generated automatically:

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

本地提供字体 ​

🌐 Serve Fonts Locally

默认情况下，该预设会从提供商的 CDN 获取字体。如果你想本地提供字体，可以下载字体并使用 @unocss/preset-web-fonts/local 的处理器从你自己的服务器提供。

🌐 By default the preset will fetch the fonts from the provider's CDN. If you want to serve the fonts locally, you can download the fonts and serve them from your own server using the processor from @unocss/preset-web-fonts/local.

ts
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',

        // Custom fetch function to download the fonts
        fetch: async url => axios.get(url)
      })
    }),
  ],
})

这将把字体资源下载到 public/assets/fonts 并从客户端的 /assets/fonts 提供。当执行此操作时，请确保字体的许可证允许你进行再分发，否则本工具不对任何法律问题负责。

🌐 This will download the fonts assets to public/assets/fonts and serve them from /assets/fonts on the client. When doing this, please make sure the license of the fonts allows you to redistribute so, the tool is not responsible for any legal issues.

INFO

此功能特定于 Node.js，在浏览器中不起作用。

🌐 This feature is Node.js specific and will not work in the browser.