Appearance
网页字体预设
¥Web Fonts preset
只需提供字体名称即可使用 谷歌字体、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
ts
// uno.config.ts
import { defineConfig } from 'unocss'
import presetWebFonts from '@unocss/preset-web-fonts'
import presetUno from '@unocss/preset-uno'
export default defineConfig({
presets: [
presetUno(),
presetWebFonts({ /* options */ }),
],
})
提示
该预设包含在 unocss
包中,你也可以从那里导入它:
¥This preset is included in the unocss
package, you can also import it from there:
ts
import { presetWebFonts } from 'unocss'
浏览器
¥Providers
目前支持的提供商:
¥Currently supported Providers:
none
- 不执行任何操作,将字体视为系统字体¥
none
- do nothing, treat the font as system fontgoogle
- 谷歌字体¥
google
- Google Fontsbunny
- 保护隐私的谷歌字体¥
bunny
- Privacy-Friendly Google Fontsfontshare
- 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.
ts
// uno.config.ts
import { defineConfig } from 'unocss'
import presetWebFonts from '@unocss/preset-web-fonts'
import presetUno from '@unocss/preset-uno'
import axios from 'axios'
import ProxyAgent from 'proxy-agent'
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.
ts
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.
ts
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
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";
}