如何在vuetify中更改字体族名称以适应区域语言的更改

Question

我有一个多语言应用程序，可以通过选择输入来切换语言，该输入可以在两种语言之间切换，另一方面，当语言环境更改时，我希望切换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;
      }
    },
  },

- shahriar eshraghi

Answer 1

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

- Seyed Arman Fatemi