Vue进阶（幺捌伍）：动态设置系统字体

前言

在项目优化过程中，实现了主体色替换功能，接下来考虑实现系统字体设置，主要提供3种字体大小供用户选择。

实现思路

<el-dropdown-menu style="color: #20a0ff" slot="dropdown">
    <!--切换主题色-->
    <el-dropdown-item divided style="display: flex; justify-content: space-around; width: 220px; padding-top: 10px;">
        主题色:
        <change-color></change-color>
      <!--系统默认主题色-->
      <el-button type="text" @click="resetSysColor" style="color: #409eff;">重置</el-button>
    </el-dropdown-item>
    <el-dropdown-item divided style="display: flex; justify-content: space-around; width: 240px; padding-top: 10px; margin-left: 33px;">
      系统字体:
      <el-radio-group v-model="sysFontSize" size="small" style="padding-left: 8px;" @change="changeSysConfig">
        <el-radio-button :label="1">小</el-radio-button>
        <el-radio-button :label="2">中</el-radio-button>
        <el-radio-button :label="3">大</el-radio-button>
      </el-radio-group>
      <!--系统默认字体-->
      <el-button type="text" @click="resetSysFont" style="padding-left: 8px; color: #409eff;">重置</el-button>
    </el-dropdown-item>
  </el-dropdown-menu>

import { mapGetters } from 'vuex'
import appConfig from '../../../config/app-config.js'

export default {
data () {
return {
sysFontSize: '' // 系统字体
}
},
computed: {
...mapGetters(['sysFont'])
},
watch: {
sysFont (newVal) {
console.log('sysFont:', this.sysFont)
switch (this.sysFont) {
  case '12':
    this.sysFontSize = 1
    break
  case '14':
    this.sysFontSize = 2
    break
  case '16':
    this.sysFontSize = 3
    break
}
}
},
// 重置系统主题色
resetSysColor () {
sessionStorage.removeItem('theme_color')
this.changeSysConfig()
location.reload()
},
// 重置系统字体
resetSysFont () {
sessionStorage.removeItem('theme_font')
this.sysFontSize = appConfig.themeFontSize
this.changeSysConfig(appConfig.themeFontSize)
},
// 更新系统主题色
changeSysConfig (val) {
let fontSize = 0
switch (val) {
  case 1:
    fontSize = '12'
    break
  case 2:
    fontSize = '14'
    break
  case 3:
    fontSize = '16'
    break
}
document.querySelector('html').style.fontSize = fontSize + 'px'
let data = {
  syscolor: curColor,
  sysfont: fontSize
}
// 每次开关状态更改，保存开关状态
updateSysConfig(JSON.stringify(data)).then((response) => {
  changeThemeColor(curColor)
  sessionStorage.setItem('theme_font', fontSize)
})
}

涉及知识点

• 动态设置html根字体大小

document.querySelector('html').style.fontSize = fontSize + 'px'

• 若适配不同屏幕（随着设备屏幕的大小而变化，从而实现响应式），建议采用以下逻辑：

 var html =document.querySelector('html');
 html.style.fontSize = document.documentElement.clientWidth/10+'px';

• 如果设置了根字体大小，font-size单位必须是rem。
• 浏览器窗口更改后，监听屏幕尺寸变化逻辑如下：

window.onresize = () => {
  let fontSize = window.innerWidth / 10
  fontSize = fontSize > 50 ? 50 : fontSize
  const html = document.querySelector('html')
  html.style.fontSize = fontSize + 'px'
}

• CSS 属性 选择器;
• calc() 函数用于动态计算长度值;

拓展阅读

• 《Vue进阶（幺柒零）：前端用户体验提升（四）应用rem/em实现字体自适应》
• 《Vue进阶（幺陆捌）：前端用户体验提升（三）应用vw/vh实现自定义布局》