当 vuetify 中的语言环境更改时如何更改字体系列答案

【问题标题】：How to change font-family when locale language changes in vuetify当 vuetify 中的语言环境更改时如何更改字体系列
【发布时间】：2022-01-05 19:45:35
【问题描述】：

我有一个多语言应用程序，它会通过选择输入切换语言，在两种语言之间切换区域设置，另一方面，我有 2 个字体系列，我想在区域设置更改时切换。

vuetify.js

    import Vue from 'vue';
    import Vuetify from 'vuetify';
    import 'vuetify/dist/vuetify.min.css';
    import fa from '../i18n/vuetify/fa.ts';
    import en from '../i18n/vuetify/en.ts';
    
    Vue.use(Vuetify);
    
    export default new Vuetify({
      rtl: true,
      lang: {
        locales: { fa, en },
        current: 'fa',
      },
    });

style.scss

    // my font-faces
    @import url('./fonts/gilroy/gilroy.css');
    @import url('./fonts/yekan/yekan.css');
    
    $font-family: 'YekanBakh'; //or Gilroy
    .v-application {
        font-family: $font-family, sans-serif !important;
        [class*='text-'] {
          font-family: $font-family, sans-serif !important;
        }
      }

LanguageSelector.vue

export default {
  data: () => ({
    languages: [
      {
        label: 'فـارسی',
        value: 'fa',
        icon: iranFlag,
      },
      {
        label: 'English',
        value: 'en',
        icon: ukFlag,
      },
    ],
    selectedLanguage: {
      label: 'فـارسی',
      value: 'fa',
      icon: iranFlag,
    },
  }),
  watch: {
    selectedLanguage(val) {
      this.$vuetify.lang.current = val;
      if (val === 'en') {
        this.$vuetify.rtl = false;
      } else {
        this.$vuetify.rtl = true;
      }
    },
  },

【问题讨论】：

标签： vue.js vuejs2 fonts vuetify.js

【解决方案1】：

虽然有不同的方法来实现这一点，但逻辑是相似的。您应该有两个单独的文件（例如：style.css 和 style.rtl.css），并在您的自定义语言服务的帮助下检测所选语言环境的方向，然后将相应的样式应用于您的应用程序。但是，我们如何才能实现这个目标呢？这完全取决于您的需求。您可以手动完成，也可以使用类似 plugin 的东西。

【讨论】：