网页字体预设

¥Web Fonts preset

只需提供字体名称即可使用谷歌字体、FontShare 中的网络字体。

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

参见所有支持的提供商。

¥See all supported providers.

源代码

¥Source Code

安装

¥Installation

pnpmyarnnpm

bash

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

bash

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

bash

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

uno.config.ts

import presetUno from '@unocss/preset-uno'
import presetWebFonts from '@unocss/preset-web-fonts'
import { defineConfig } from 'unocss'

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

提示

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

¥This preset is included in the unocss package, you can also import it from there:

import { presetWebFonts } from 'unocss'

浏览器

¥Providers

目前支持的提供商：

¥Currently supported Providers:

none - 不执行任何操作，将字体视为系统字体
¥none - do nothing, treat the font as system font
google - 谷歌字体
¥google - Google Fonts
bunny - 保护隐私的谷歌字体
¥bunny - Privacy-Friendly Google Fonts
fontshare - ITF 优质字体服务
¥fontshare - Quality Font Service by ITF

信息

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

¥PR welcome to add more providers. 🙌

自定义获取函数

¥Custom fetch function

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

¥Use your own function to fetch font source.

uno.config.ts

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

export default defineConfig({
  presets: [
    presetUno(),
    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
¥Type: WebFontsProviders
默认：google
¥Default: google

网络字体的提供商服务。

¥Provider service of the web fonts.

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

fonts

类型：Record<string, WebFontMeta | string | (WebFontMeta | string)[]>
¥Type: Record<string, WebFontMeta | string | (WebFontMeta | string)[]>

字体。详细信息请参见 example。

¥The fonts. See example for more details.

interface WebFontMeta {
  name: string
  weights?: (string | number)[]
  italic?: boolean
  /**

   * Override the provider

   * @default <matches root config>
   */
  provider?: WebFontsProviders
}

extendTheme

类型：boolean
¥Type: boolean
默认：true
¥Default: true

扩展主题对象。

¥Extend the theme object.

themeKey

类型：string
¥Type: string
默认：fontFamily
¥Default: fontFamily

主题对象的键。

¥Key for the theme object.

inlineImports

类型：boolean
¥Type: boolean
默认：true
¥Default: true

内联 CSS @import()。

¥Inline CSS @import().

customFetch

类型：(url: string) => Promise<string>
¥Type: (url: string) => Promise<string>
默认：undefined
¥Default: undefined

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

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

示例

¥Example

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.

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'
      })
    }),
  ],
})

这会将字体资源下载到 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.

信息

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

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

网页字体预设 ​

安装 ​

浏览器 ​

自定义获取函数 ​

选项 ​

provider ​

fonts ​

extendTheme ​

themeKey ​

inlineImports ​

customFetch ​

示例 ​

本地提供字体 ​

网页字体预设

安装

浏览器

自定义获取函数

选项

provider

fonts

extendTheme

themeKey

inlineImports

customFetch

示例

本地提供字体