您不需要配置 Nuxt 字体，但您可以这样做以实现更精细的控制，方法是在您的 nuxt.config 中使用 fonts 属性。
export default defineNuxtConfig({
modules: ['@nuxt/fonts'],
fonts: {
// Options
}
})
这些选项定义了如何下载字体，包括权重、样式、子集等。这些选项可以用作默认行为，使用 defaults，或者针对特定字体使用单独的行为，使用 families。
defaults这定义了所有字体的默认字体选项。
defaults 示例
export default defineNuxtConfig({
modules: ['@nuxt/fonts'],
fonts: {
defaults: {
weights: [400],
styles: ['normal', 'italic'],
subsets: [
'cyrillic-ext',
'cyrillic',
'greek-ext',
'greek',
'vietnamese',
'latin-ext',
'latin',
]
},
}
})
styles默认值：['normal', 'italic']
定义应为字体下载的样式。
subsets默认值：['cyrillic-ext', 'cyrillic', 'greek-ext', 'greek', 'vietnamese', 'latin-ext', 'latin']
定义应为字体下载的子集。
fallbacks默认值
{
'serif': ['Times New Roman'],
'sans-serif': ['Arial'],
'monospace': ['Courier New'],
'cursive': [],
'fantasy': [],
'system-ui': [
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Helvetica Neue',
'Arial',
],
'ui-serif': ['Times New Roman'],
'ui-sans-serif': ['Arial'],
'ui-monospace': ['Courier New'],
'ui-rounded': [],
'emoji': [],
'math': [],
'fangsong': [],
}
如果您使用通用的字体系列，如 Roboto, sans-serif，我们会在生成回退指标时将该通用系列名称“翻译”成一个或多个字体系列。您可以自定义我们使用的系列。（一个或两个效果最好。）
families这是一个数组，它定义了特定字体的字体选项。您可以使用来自 defaults 的任何属性，同时还有一些额外的属性。
families 示例
export default defineNuxtConfig({
modules: ['@nuxt/fonts'],
fonts: {
families: [
// do not resolve this font with any provider from `@nuxt/fonts`
{ name: 'Custom Font', provider: 'none' },
// only resolve this font with the `google` provider
{ name: 'My Font Family', provider: 'google' },
// specify specific font data - this will bypass any providers
{ name: 'Other Font', src: 'https://example.com/font.woff2', weight: 'bold' },
]
}
})
name默认值：无
定义应给出选项的字体的名称。这是 families 数组中每个项目的必填项。
global默认值：false
定义是否注入 @font-face，无论项目中是否使用。
provider默认值：无
定义用于给定字体的提供商。您可以从 none、google、bunny、fontshare、fontsource、adobe、local 中选择任何提供商。
src默认值：无
定义应用于给定字体的 src。如果定义了此选项，则不会对给定字体系列使用任何其他提供商。
提供商可以有自己的选项。这些选项会直接传递给不同的字体提供商。有关更多信息，请参阅 提供商文档。
export default defineNuxtConfig({
modules: ['@nuxt/fonts'],
fonts: {
google: {},
local: {},
adobe: {
id: ['fontkitId1', 'fontkitId2'],
}
}
})
providers这定义了使用提供商的行为。
export default defineNuxtConfig({
modules: ['@nuxt/fonts'],
fonts: {
providers: {
// You can pass a new custom provider - see more in the providers documentation
// for what this file should look like
custom: '~/providers/custom',
// Or you can disable a built-in provider
google: false,
}
}
})
assets这定义了使用资源的行为。
export default defineNuxtConfig({
modules: ['@nuxt/fonts'],
fonts: {
assets: {
// The baseURL where font files are served.
prefix: '/_fonts/'
}
}
})
priority您可以自定义检查提供商的顺序。
export default defineNuxtConfig({
modules: ['@nuxt/fonts'],
fonts: {
priority: ['bunny', 'google'],
}
})
provider在某些情况下，您可能希望只使用一个字体提供商。这等同于禁用所有其他字体提供商。
export default defineNuxtConfig({
modules: ['@nuxt/fonts'],
fonts: {
provider: 'google'
}
})
devtools定义是否为 Nuxt 字体启用开发工具，默认值为 true
export default defineNuxtConfig({
modules: ['@nuxt/fonts'],
fonts: {
// Disable the Nuxt Devtools integration
devtools: false
}
})
experimental定义是否启用实验性功能。默认情况下，它们都是 false。
export default defineNuxtConfig({
modules: ['@nuxt/fonts'],
fonts: {
experimental: {
// Required for TailwindCSS v4. You can enable support for processing CSS variables for font family names. This may have a performance impact.
processCSSVariables: true
// Defines whether to enable adding local fallbacks. Default is `false`.
disableLocalFallbacks: true
}
}
})