Vue3+Pinia实现全局动态切换字体方案的完整落地方案

@font-face {
  font-family: 'xxx';            /* 字体别名（全局唯一） */
  font-weight: 400;              /* 字重 */
  font-style: normal;            /* 字体样式 */
  font-display: swap;            /* 解决FOIT闪烁问题 */
  src: url('./xxx.woff2') format('woff2'); /* 资源地址 */
}

# 安装核心依赖：fonttools(字体处理)、brotli(woff2压缩)、lxml(解析依赖)
pip install fonttools brotli lxml
# 国内镜像加速（安装失败时使用）
pip install fonttools brotli lxml -i https://pypi.tuna.tsinghua.edu.cn/simple

import os
import subprocess
def ttf_to_mini_woff2(ttf_path):
    """将TTF字体子集化并转换为WOFF2格式"""
    dir_path = os.path.dirname(ttf_path)
    filename = os.path.basename(ttf_path).replace('.ttf', '.woff2')
    output_path = os.path.join(dir_path, filename)
    # 仅保留常用字符：ASCII + 中文常用字 + 标点
    cmd = [
        "pyftsubset",
        ttf_path,
        "--unicodes=U+0020-007E,U+3000-303F,U+4E00-9FFF,U+FF00-FFEF",
        "--flavor=woff2",  # 输出WOFF2格式
        "--drop-tables=GPOS,GSUB,FFTM",  # 剔除无用表
        f"--output-file={output_path}"
    ]
    subprocess.run(cmd, check=True)
    print(f"✅ 生成轻量化字体：{output_path}")
if __name__ == "__main__":
    # 替换为你的TTF字体路径
    font_path = '/Users/xxx/Downloads/AlibabaPuHuiTi.ttf'
    ttf_to_mini_woff2(font_path)

/* 阿里巴巴普惠体 */
@font-face {
  font-family: 'AlibabaPuHuiTi';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./AlibabaPuHuiTi.woff2') format('woff2');
}
/* JetBrains Mono 代码字体 */
@font-face {
  font-family: 'JetBrainsMono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./JetBrainsMono.woff2') format('woff2');
}

// 根节点字体变量，所有页面继承
:root {
  --font-family: ''; // 动态切换的字体变量
}
// 全局字体回退链：确保字体加载失败时的兜底
html {
  font-family: var(--font-family), system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
}

// 引入字体注册文件
@import './css/font-face.css';
// 引入主题CSS变量文件
@import './theme.scss';

/** 字体类型枚举 */
export const FONT_TYPE = {
  Default: 'default', // 默认字体
  AlibabaPuHuiTi: 'alibabaPuHuiTi',
  JetBrainsMono: 'jetbrainsMono',
  OPPOSans: 'oppoSans'
} as const;

/** 字体类型别名 */
export type FontType = typeof FONT_TYPE[keyof typeof FONT_TYPE];

/** 字体显示标签 */
export const FONT_LABEL: Record<FontType, string> = {
  [FONT_TYPE.Default]: '默认字体',
  [FONT_TYPE.AlibabaPuHuiTi]: '阿里巴巴普惠体',
  [FONT_TYPE.JetBrainsMono]: 'JetBrains 代码字体',
  [FONT_TYPE.OPPOSans]: 'OPPO Sans'
};

import { defineStore } from 'pinia';
import { ref, watch } from 'vue';
import { FONT_TYPE, FontType } from '@/types/font';

// 字体类型与@font-face别名的映射
const fontMap: Record<FontType, string> = {
  [FONT_TYPE.Default]: '',
  [FONT_TYPE.AlibabaPuHuiTi]: 'AlibabaPuHuiTi',
  [FONT_TYPE.JetBrainsMono]: 'JetBrainsMono',
  [FONT_TYPE.OPPOSans]: 'OPPOSans'
};

// 持久化工具：从localStorage读取
const getStoredFont = (): FontType => {
  const stored = localStorage.getItem('fontType');
  return (stored as FontType) || FONT_TYPE.Default;
};

export const useFontStore = defineStore('font', () => {
  // 响应式状态：当前选中字体
  const fontType = ref<FontType>(getStoredFont());

  // 应用字体到CSS变量
  const applyFont = () => {
    const root = document.documentElement;
    const fontFamily = fontMap[fontType.value];
    if (fontFamily) {
      root.style.setProperty('--font-family', fontFamily);
    } else {
      root.style.removeProperty('--font-family'); // 恢复默认
    }
  };

  // 设置字体类型（外部调用）
  const setFontType = (type: FontType) => {
    fontType.value = type;
    localStorage.setItem('fontType', type); // 持久化
  };

  // 监听字体变化，即时应用
  watch(fontType, applyFont, { immediate: true });

  return { fontType, setFontType };
});

<template>
  <div class="font-switch-container">
    <h3 class="font-switch-title">字体设置</h3>
    <el-select 
      v-model="fontStore.fontType" 
      @change="handleFontChange"
      placeholder="请选择字体"
      size="small"
    >
      <el-option
        v-for="[value, label] in Object.entries(FONT_LABEL)"
        :key="value"
        :label="label"
        :value="value"
      />
    </el-select>
  </div>
</template>
<script setup lang="ts">
import { useFontStore } from '@/stores/fontStore';
import { FONT_LABEL, FontType } from '@/types/font';
const fontStore = useFontStore();
// 字体切换回调（可选）
const handleFontChange = (type: FontType) => {
  fontStore.setFontType(type);
  // 可添加埋点、提示等逻辑
};
</script>
<style scoped>
.font-switch-container {
  padding: 16px;
  border-radius: 8px;
  background: #f5f7fa;
}
.font-switch-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #303133;
}
</style>

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import './assets/styles/global.scss'; // 全局样式

const app = createApp(App);
// 注册Pinia
app.use(createPinia());
app.mount('#app');