如何在Quasar中动态修改字体（大小、族）实现个性化UI设置

核心思路：将Quasar Sass变量转为可动态修改的CSS自定义属性 #

Quasar的原生Sass变量是编译时生效的，但我们可以先在全局样式里把这些变量映射为CSS自定义属性，之后就能用Quasar自带的setCssVar工具（或原生JS）动态修改，同时结合本地存储保存用户设置。

步骤1：在全局样式中暴露Sass变量 #

在项目的src/css/app.scss（全局样式文件）中添加以下代码，把需要动态修改的Quasar Sass变量转为CSS自定义属性：

:root {
  --q-body-font-size: $body-font-size;
  --q-space-base: $space-base;
  --q-typography-font-family: $typography-font-family;
  // 按需添加更多需要动态修改的变量映射
}

步骤2：用Quasar的setCssVar动态修改属性 #

现在可以直接用Quasar提供的setCssVar工具修改这些自定义属性，比原生JS更贴合框架生态：

import { setCssVar } from 'quasar'

// 切换到大号字体
setCssVar('q-body-font-size', '18px')
// 修改基础间距
setCssVar('q-space-base', '16px')
// 设置自定义全局字体
setCssVar('q-typography-font-family', "'Microsoft Yahei', sans-serif")

步骤3：保存用户设置到本地存储 #

为了让设置在页面刷新后依然生效，把配置存入localStorage：

// 保存设置
const saveUISettings = (settings) => {
  localStorage.setItem('ui-settings', JSON.stringify(settings))
}

// 加载已保存的设置
const loadUISettings = () => {
  const saved = localStorage.getItem('ui-settings')
  return saved ? JSON.parse(saved) : { fontSize: '16px', fontFamily: "'Roboto', sans-serif" }
}

// 应用初始化时加载设置
const initUISettings = () => {
  const settings = loadUISettings()
  setCssVar('q-body-font-size', settings.fontSize)
  setCssVar('q-typography-font-family', settings.fontFamily)
}

// 在App.vue的created钩子中调用initUISettings完成初始化

步骤4：UI设置页面实现示例 #

下面是一个简单的设置页面组件，让用户选择字号和自定义字体：

<template>
  <q-page class="row q-pa-md">
    <div class="col-12">
      <h3>UI 设置</h3>
      <q-select
        label="字号"
        v-model="selectedFontSize"
        :options="[
          { label: '小号', value: '14px' },
          { label: '中号', value: '16px' },
          { label: '大号', value: '18px' }
        ]"
        @input="updateFontSize"
      />
      <q-input
        label="自定义字体"
        v-model="customFontFamily"
        @input="updateFontFamily"
        placeholder="例如：'Arial', sans-serif"
        class="mt-4"
      />
    </div>
  </q-page>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { setCssVar } from 'quasar'

const selectedFontSize = ref('16px')
const customFontFamily = ref("'Roboto', sans-serif")

const updateFontSize = (size) => {
  setCssVar('q-body-font-size', size)
  saveUISettings({ fontSize: size, fontFamily: customFontFamily.value })
}

const updateFontFamily = (font) => {
  setCssVar('q-typography-font-family', font)
  saveUISettings({ fontSize: selectedFontSize.value, fontFamily: font })
}

const saveUISettings = (settings) => {
  localStorage.setItem('ui-settings', JSON.stringify(settings))
}

const loadUISettings = () => {
  const saved = localStorage.getItem('ui-settings')
  return saved ? JSON.parse(saved) : { fontSize: '16px', fontFamily: "'Roboto', sans-serif" }
}

onMounted(() => {
  const settings = loadUISettings()
  selectedFontSize.value = settings.fontSize
  customFontFamily.value = settings.fontFamily
  setCssVar('q-body-font-size', settings.fontSize)
  setCssVar('q-typography-font-family', settings.fontFamily)
})
</script>

注意事项 #

• 确保映射的Sass变量在Quasar默认变量列表中存在，按需调整映射的属性。
• 自定义字体需确保已加载（比如通过CDN或本地字体文件引入），否则会显示系统默认字体。

内容的提问来源于stack exchange，提问作者igorludi