Nuxt Fontaine 项目教程

Nuxt Fontaine 项目教程

fontaine 🔤 Font metric overrides to reduce CLS 项目地址: https://gitcode.com/gh_mirrors/fon/fontaine

1. 项目介绍

Nuxt Fontaine 是一个用于减少 Cumulative Layout Shift (CLS) 的 Nuxt 模块。它通过使用本地字体回退和精心设计的字体度量来实现这一目标。该模块能够自动生成字体度量和回退，从而提高网页的性能和用户体验。

主要功能

• 减少 CLS：通过使用本地字体回退和字体度量覆盖来减少布局偏移。
• 自动生成字体度量：自动生成字体度量和回退规则。
• 零运行时开销：纯 CSS 实现，无运行时开销。

2. 项目快速启动

安装

首先，确保你已经安装了 Nuxt 3 项目。然后，使用以下命令安装 Nuxt Fontaine 模块：

npx nuxi@latest module add fontaine

配置

在 nuxt.config.ts 文件中添加以下配置：

export default defineNuxtConfig({
  modules: ['@nuxtjs/fontaine'],
  // 如果你使用的是 Google 字体或没有 @font-face 声明的字体，可以在这里声明
  // 大多数情况下这不是必需的
  // fontMetrics: [
  //   {
  //     fonts: ['Inter', { family: 'Some Custom Font', src: '/path/to/custom/font.woff2' }]
  //   }
  // ]
})

使用

安装并配置完成后，Nuxt Fontaine 模块会自动扫描你的 @font-face 规则并生成相应的回退规则。你无需进行额外配置即可享受 CLS 减少的好处。

3. 应用案例和最佳实践

案例1：使用 Google 字体

如果你使用 Google 字体，可以通过以下方式配置：

export default defineNuxtConfig({
  modules: ['@nuxtjs/fontaine'],
  fontMetrics: [
    {
      fonts: ['Roboto', { family: 'Open Sans', src: 'https://fonts.googleapis.com/css2?family=Open+Sans' }]
    }
  ]
})

最佳实践

• 内联 CSS：为了获得最佳性能，建议将所有 CSS 内联，而不仅仅是字体回退规则。这样可以避免样式表加载时的布局偏移。
• 使用本地字体：尽量使用本地字体，减少对外部资源的依赖。

4. 典型生态项目

Nuxt 3

Nuxt Fontaine 是 Nuxt 3 生态系统的一部分，专为 Nuxt 3 设计。它与 Nuxt 3 的其他模块和功能无缝集成，提供了更好的开发体验和性能优化。

Tailwind CSS

如果你使用 Tailwind CSS，可以通过以下方式配置字体回退：

import type { Config } from 'tailwindcss'
import { fontFamily } from 'tailwindcss/defaultTheme'

export default <Partial<Config>> {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Roboto', 'Roboto fallback', ...fontFamily.sans]
      }
    }
  }
}

Fontaine 核心库

Nuxt Fontaine 的核心功能也可以在非 Nuxt 项目中使用。你可以通过安装 fontaine 库来实现类似的功能：

npm install fontaine

然后在你的项目中使用：

import { FontaineTransform } from 'fontaine'

const fontaine = new FontaineTransform()
fontaine.generateMetrics()

通过这些步骤，你可以在任何项目中使用 Fontaine 来减少 CLS。

fontaine 🔤 Font metric overrides to reduce CLS 项目地址: https://gitcode.com/gh_mirrors/fon/fontaine