前言

最近一个项目有简繁字体切换的功能，经过与大佬的探讨，最终大佬完成了这个需求，本节我就借花献佛，汇总一下该功能的实现方案。

思路

项目要求页面上展示的字体类型是一致的，包括接口返回数据、消息提示类等。最开始这功能是全权交由前端处理，后端返回的数据前端也要一块处理。简单搜索讨论下，确定了几个思路，接下来就是一个个去尝试。

Vue I18n

公司技术栈是vue2，简繁切换就是语种切换，所以一开始就想到了Vue I18n国际化插件，中英切换一般就是通过该插件实现的。在此之前我们先简单了解下Vue I18n实现语音环境的方法，以中英为例：

安装Vue I18n，注意我们要根据vue版本去下载，项目中用的vue2，下载了V8.x版本，如果是vue3，就下载V9.x版本。
设置本地化语言环境信息------messages，ts类型为LocaleMessages，key值是语言Locale，value值是信息对象。

声明一个中英的hello信息：

js 复制代码

const messages = {
en: {
message: {
hello: 'hello'
}
},
zh: {
message: {
hello: '你好'
}
}
}

3.new一个实例，设置语言与语音环境信息两个配置项，并添加到Vue实例中。

js 复制代码

const i18n = new VueI18n({
  locale: 'zh', //语言
  messages,
})
new Vue({ i18n }).$mount('#app')

修改locale配置项的值，页面就会渲染对应语音的值。这就是Vue I18n配置语音环境的过程，套用到我们的简繁切换中，就是在第二步设置messages时将英文改为繁体。直接使用Vue I18n需要我们设置大量的messages，在此基础上我们可以定义一个简繁切换的方法，这个方法网上有很多，大致思路如下：

String原型上新增一个tran方法，循环字符串将每个字符进行替换，zhS为简体、zhT为繁体。
在页面渲染的时候调用方法去循环页面元素，获取元素里面text，然后调用tran方法，完成繁体切换。使用Vue I18n有一大弊端，每个页面在加载时都需要去调用该方法，每次请求接口也要去调用，性能会大大的折扣。

字体包

第二种方案是通过css，引入字体包，将font-family设置为繁体，这样不仅方便快捷，性能也比Vue I18n好多了。注意我们一定要找免费商用的字体包，繁体比较出名的字体包就是苹方。下载好之后，用@font-face引入使用：

js 复制代码

@font-face {
font-family: 'PingFang SC';
src: url(字体包路径);
}

我们再定义一个class类，将font-family设置为PingFang SC，当我们需要繁体时，就往body添加该类名，反之去掉即可。

js 复制代码

  changeLocale(flag) {
    if(flag) {
      document.body.setAttribute('class', 'zhT')
    } else {
      document.body.removeAttribute('class')
    }
  }

这样简繁切换就能搞好了，不过css终归是样式操作，该方法弊端就是dom里面的内容还是简体，不会跟着变动，请求接口传参也都是简体。

总结

以上就是简繁切换实现两种方式，实际项目中我们可以结合两种使用，接口处理类用tran方法；页面用字体包。如果页面要求dom里的内容也要跟着变化，字体包就不需要考虑了。

需求小能手——简繁切换

前言

思路

Vue I18n

字体包

总结