使用 - Nuxt Fonts - Nuxt 中文

纯 CSS

您可以通过在 CSS 中添加 font-family 声明来将 Nuxt Fonts 与纯 CSS 一起使用

assets/css/fonts.css

div {
  font-family: 'Inter', sans-serif;
}

请注意，Nuxt Fonts 仅为 font-family 声明中的第一个字体生成 CSS。列表中的后续字体将用于为字体回退生成指标。

您可以通过在配置文件中设置 fontFamily 来将 Nuxt Fonts 与 Tailwind CSS 一起使用

tailwind.config.js

export default {
  theme: {
    extend: {
      fontFamily: {
        custom: ['Inter'],
      },
    },
  },
}

如果字体名称包含无效标识符（例如空格字符），则需要将其用引号括起来或手动转义字符。阅读更多内容这里。

TailwindCSS v4 带来了全新配置方式。在 v4 中，如果您要指定字体，可以使用 CSS 变量

main.css

@theme {
  --font-family-display: "Inter", "sans-serif";
}

由于它使用 CSS 变量，因此您应该启用 Nuxt Fonts processCSSVariables 实验性功能以支持处理字体族名称的 CSS 变量

nuxt.config.ts

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

请注意，processCSSVariables 仍然是实验性功能，可能会影响性能。

您可以通过在配置文件中设置 fontFamily 来将 Nuxt Fonts 与 UnoCSS 一起使用

uno.config.js

import { defineConfig } from 'unocss'

export default defineConfig({
  theme: {
    fontFamily: {
      inter: 'Inter',
    },
  },
})

配置

Nuxt Fonts 零配置即可开箱即用，但您始终可以添加一些配置以实现更精细的控制。

提供者

字体提供者旨在可插拔和可扩展，因此无论您的设置如何，您都应该能够使用现有提供者或编写自己的提供者。