安装

自动安装

要开始，请将 @nuxt/fonts 添加到您的项目中

npx nuxi@latest module add fonts

手动安装

或者您可以手动安装它。

pnpm i @nuxt/fonts

然后，将其添加到您 nuxt.config 中的 modules 中

export default defineNuxtConfig({
  modules: [
    '@nuxt/fonts',
  ]
})

配置

如果您还没有将其添加到 .gitignore 中，请继续添加 .data 目录

.data

您现在可以通过在 CSS 中添加 font-family 声明来开始。✨

<template>
  <div>
    Hello Nuxt Fonts!
  </div>
</template>

<style scoped>
div {
  font-family: Roboto, sans-serif;
}
</style>

就是这样！Nuxt 字体会检测到这一点，您应该立即在浏览器中看到网页字体加载。 详细了解其工作原理.

故障排除

如果在安装过程中出现错误

• 确保您使用的是最新版本的 Node.js LTS（发布计划）
• 尝试升级到最新版本
  pnpmyarnnpm

  pnpm up @nuxt/fonts
  

• 尝试重新创建您的锁定文件

  npx nuxt@latest upgrade --force
  

• 检查您的网络连接。您的机器可能难以与字体提供商通信。
• 如果以上方法均无效，请 打开一个问题，并包含错误跟踪、操作系统、Node 版本和用于安装的包管理器。