Nuxt 字体附带了许多内置提供者。
本地本地提供者会深入扫描您的 public/ 目录（包括您的层）以查找字体文件（支持 ttf、woff、woff2、eot 或 otf 扩展名）。
然后，当您在 CSS 中使用 font-family 时，我们会检查它是否与这些文件中的一个匹配。我们还期望字体粗细、字体样式和子集在文件名中，除非它们是“默认”值（400 粗细、normal 样式和 latin 子集）。
谷歌谷歌字体 是最知名的公共字体 API 之一。
googleicons谷歌字体图标 添加了对 Material Symbols 和 Material Icons 的支持。
兔子兔子字体 由 bunny.net 提供，是一个与谷歌字体兼容的即插即用 API，专注于隐私。
fontshareFontshare 是一家免费的字体服务，提供来自印度字体铸造厂 (ITF) 的 100 多种专业级字体。
fontshare 使用字体之前阅读 他们的完整条款。fontsourceFontsource 是一个开源字体集合，专为在 Web 应用程序中进行自托管而设计。
AdobeAdobe 字体 是一款字体服务，适用于个人和商业用途，包含在 Creative Cloud 订阅中。
要在您的 Nuxt 应用程序中配置 Adobe 提供者，您必须提供一个项目 ID 或项目 ID 数组，这些 ID 对应于您在 Adobe 字体中创建的 Web 项目。
export default defineNuxtConfig({
modules: ['@nuxt/fonts'],
fonts: {
adobe: {
id: ['<some-id>', '<another-kit-id>'],
},
}
})
adobe 使用字体之前阅读 他们的完整条款。Nuxt 字体中提供者 API 的核心已提取到一个通用库，可以被任何框架使用 - unifont.
提供者 API 可能在接下来的几个 unifont 版本中发生变化，但目前看起来像这样
import { defineFontProvider } from 'unifont'
export default defineFontProvider('some-custom-provider', async (options) => {
// do some setup
return {
async resolveFont (fontFamily, options) {
if (fontFamily === 'My Font Family') {
return {
fonts: [
{
src: [
{ url: 'https://cdn.org/my-font.woff2', format: 'woff2' },
],
weight: 400,
style: 'normal',
}
]
}
}
}
}
})
模块作者还可以在 fonts:providers 钩子中添加他们自己的提供者（或删除现有的提供者），该钩子在所有模块运行后由 Nuxt 字体调用。
nuxt.hook('fonts:providers', providers => {
delete providers.adobe
providers['custom-provider'] = defineFontProvider('custom-provider', async () => {
/** some setup */
return {
async resolveFont (fontFamily, options) {
/** resolve font faces */
}
}
})
})