如何在Nuxt3+Vuetify3多语言应用中根据nuxtI18n语言切换$body-font-family字体

嘿，我之前在做Nuxt3+Vuetify3多语言项目的时候，刚好碰到过和你一模一样的需求——根据切换的语言（波斯语/英语）自动替换全局字体。给你分享两个亲测有效的方案，你可以根据自己的项目情况选一个：

方案一：监听语言切换事件，动态修改CSS变量 #

Vuetify的$body-font-family实际上对应着全局CSS变量--v-body-font-family，我们可以通过监听nuxtI18n的语言切换事件，动态修改这个变量的值。

步骤1：准备并引入字体文件 #

先把你的波斯语字体（比如常用的Vazirmatn）和英语字体（比如Roboto）放到项目的assets/fonts目录下，然后在assets/css/main.css里通过@font-face引入：

@font-face {
  font-family: 'Vazirmatn';
  src: url('~/assets/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('~/assets/fonts/Roboto-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

步骤2：创建插件监听语言切换 #

在项目的plugins目录下新建一个font-switcher.ts文件，用来监听语言变化并修改字体：

export default defineNuxtPlugin(({ $i18n }) => {
  // 定义设置字体的函数
  const setFontFamily = (locale: string) => {
    const rootElement = document.documentElement;
    if (locale === 'fa') {
      // 切换到波斯语时使用Vazirmatn
      rootElement.style.setProperty('--v-body-font-family', '"Vazirmatn", sans-serif');
      // 顺便设置RTL排版方向（可选，根据需求加）
      rootElement.style.direction = 'rtl';
    } else {
      // 切换到英语时使用Roboto
      rootElement.style.setProperty('--v-body-font-family', '"Roboto", sans-serif');
      rootElement.style.direction = 'ltr';
    }
  };

  // 页面初始化时先设置一次对应字体
  setFontFamily($i18n.locale.value);

  // 监听nuxtI18n的语言切换事件
  $i18n.onLocaleChanged((newLocale) => {
    setFontFamily(newLocale);
  });
});

步骤3：配置Nuxt和Vuetify #

在nuxt.config.ts里引入我们的CSS文件，并配置Vuetify的默认主题（可选，用来设置初始字体）：

export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  modules: ['@nuxtjs/i18n', 'vuetify-nuxt-module'],
  vuetify: {
    theme: {
      defaultTheme: 'light',
      themes: {
        light: {
          variables: {
            'body-font-family': '"Roboto", sans-serif' // 默认英语字体
          }
        }
      }
    }
  },
  i18n: {
    locales: [
      { code: 'en', name: 'English' },
      { code: 'fa', name: 'Farsi' }
    ],
    defaultLocale: 'en'
  }
});

方案二：通过布局组件动态添加类名切换字体 #

这个方案更偏向CSS层面，通过给根容器添加语言对应的类名，然后用CSS变量覆盖字体设置，逻辑更直观。

步骤1：同样先引入字体文件（和方案一的步骤1一致） #

确保assets/css/main.css里已经正确引入了两种字体。

步骤2：修改默认布局组件 #

打开layouts/default.vue，给根容器绑定语言对应的类名，并在样式里设置不同类名下的字体变量：

<template>
  <!-- 根据当前语言动态添加类名 -->
  <div :class="`lang-${$i18n.locale}`">
    <NuxtPage />
  </div>
</template>

<style>
/* 英语字体设置 */
.lang-en {
  --v-body-font-family: "Roboto", sans-serif;
  direction: ltr;
}

/* 波斯语字体设置 */
.lang-fa {
  --v-body-font-family: "Vazirmatn", sans-serif;
  direction: rtl;
}
</style>

这样，当你切换语言时，根容器的类名会自动变化，对应的字体和排版方向也会跟着切换，完全不需要额外的JS逻辑。

小提示 #

• 如果你用的是其他波斯语字体，只需要替换@font-face里的字体名称和文件路径就行。
• 记得给字体文件添加合适的字体权重（比如Bold、Light），如果你的项目需要用到不同粗细的文字。

备注：内容来源于stack exchange，提问作者Hanieh MA