如何修改 vue3-element-admin 全局字体大小：从尺寸切换到深度定制的 3 步指南-平芜编程栈

如何修改 vue3-element-admin 全局字体大小：从尺寸切换到深度定制的 3 步指南

【免费下载链接】vue3-element-admin🔥基于 Vue 3 + Vite 7+ TypeScript + element-plus 构建的后台管理前端模板（配套后端源码），vue-element-admin 的 vue3 版本。项目地址: https://gitcode.com/GitHub_Trending/vue3/vue3-element-admin

用 vue3-element-admin 搭建后台后，最常见的反馈之一就是“整页字体偏小、控件偏矮，长时间盯着累”。好消息是，模板里字体与控件大小由三处配置控制：运行时可切换的组件尺寸、面向首次访问者的默认值，以及 Element Plus 的 CSS 变量。下面按“改哪里 → 怎么改 → 看到什么效果”的顺序说明，改完你能得到一套团队统一的舒适字号。

前置条件：适用版本与涉及文件

项目版本 v4.9.0（Vue 3.5 + Element Plus 2.14 + Vite 8），包管理器为 pnpm
本文涉及 5 个文件，均无需新增依赖：src/settings.ts、src/stores/app.ts、src/styles/element-plus-overrides.scss、src/styles/reset.scss、src/components/SizeSelect/index.vue

第 1 步：运行时切换组件尺寸（不改任何代码）

登录进入任意页面，点击顶栏右侧的“布局大小”图标（位于搜索框与语言切换之间），下拉菜单提供默认 / 大型 / 小型三个选项。

选择后整页的输入框高度、按钮、表格行高都会随之变化，且刷新不丢失。它的工作链路是：

SizeSelect 组件触发change，调用appStore.changeSize(size)
src/stores/app.ts 中该值通过useStorage持久化：

// src/stores/app.ts const size = useStorage(STORAGE_KEYS.SIZE, defaults.size); // 键名 vea:app:size，存在 localStorage

src/App.vue 把它交给<el-config-provider :size="size">，Element Plus 按尺寸档切换内部字号与控件高度

💡 这一档适合个人偏好：每个人各自调，互不影响。

第 2 步：修改项目默认尺寸（决定首次访问者的观感）

运行时切换只对当前浏览器生效。要让每个新访问的用户第一次进来就是大号字体，改defaults.size：

// src/settings.ts export const defaults = { // ... size: ComponentSize.LARGE, // 把 default 改为 large（或 SMALL） } as const;

ComponentSize定义在 src/enums/settings.ts，取值为default/large/small。重启pnpm dev后，没有历史记录的浏览器会以新值渲染。

⚠️ 注意：改默认值不会影响已打开过系统的人，因为他们的localStorage里已有缓存值（见第 4 节排查）。

第 3 步：用 CSS 变量定制基础字号与控件高度

三档尺寸是“预设”，如果你要的是 15px 这种精确值，就在 Element Plus 的运行时覆盖文件里加 CSS 变量。项目已在此文件的:root中按同样方式覆盖了圆角、控件高度等变量：

// src/styles/element-plus-overrides.scss :root { /* 已有 --el-component-size 等变量，追加或修改以下项 */ --el-font-size-base: 15px; // 默认尺寸组件的基础字号（Element Plus 默认 14px） --el-font-size-small: 13px; // 小型组件字号 --el-font-size-large: 18px; // 大型组件字号 --el-component-size: 36px; // 输入框、按钮等控件高度 --el-component-size-small: 30px; --el-component-size-large: 42px; }

保存后 Vite 热更新，整页字体与控件高度同步放大。若只调整字号不想动高度，删掉--el-component-size-*三行即可。

第 4 步（可选）：更换全局字体栈

想换字体家族（例如引入品牌字体），改body的font-family：

// src/styles/reset.scss body { font-family: "HarmonyOS Sans SC", Inter, system-ui, "PingFang SC", "Microsoft YaHei", sans-serif; }

把自定义字体名放在最前，后面保留系统字体兜底，避免加载失败时出现突兀的字体切换。

关键参数一览

参数	所在位置	作用	建议值
`size`	src/settings.ts 的`defaults.size`	首次访问者的组件尺寸档位	`default`，团队普遍反馈字小用`large`
`--el-font-size-base`	element-plus-overrides.scss 的`:root`	默认尺寸组件的基础字号	14～15px
`--el-font-size-small`/`--el-font-size-large`	同上	小型 / 大型尺寸组件的字号	与 base 保持 2～3px 梯度
`--el-component-size`（含 small / large 三档）	同上	输入框、按钮等控件高度	项目现值 28 / 34 / 38px，等比缩放
`font-family`	reset.scss 的`body`	全局字体栈	品牌字体在前，系统字体兜底
`vea:app:size`	`localStorage`	运行时尺寸切换的持久化键	无需修改，用于排查缓存问题

验证改动是否生效

执行pnpm dev启动项目并登录
点击顶栏“布局大小”图标切换到大型，观察输入框变高、表格文字变大；再刷新一次页面，确认样式保持
打开 DevTools 控制台执行：

// 期望返回 "15px"（即你设置的 --el-font-size-base 值） getComputedStyle(document.querySelector(".el-button")).fontSize;

在 DevTools 的 Application → Local Storage 中确认存在vea:app:size，其值为你最后选择的档位

高频问题排查

现象：改了defaults.size，页面没有任何变化。原因：当前浏览器localStorage已有vea:app:size，useStorage优先读存储值而非默认值。处理：在 DevTools 中删除该键后刷新；新默认值只对首次访问生效。
现象：调大了--el-font-size-base，但small尺寸的组件没变。原因：小型 / 大型组件分别读取--el-font-size-small/--el-font-size-large，与 base 变量互不相通。处理：把对应的--el-font-size-small、--el-font-size-large按梯度一并调整。
现象：全局字号变了，侧边栏菜单图标大小却没变。原因：src/styles/layout.scss 中菜单图标固定为18px（带!important），属于刻意设计。处理：确有需要时修改layout.scss中.layout-menu-icon相关行。
现象：在页面里直接写body { font-size: 16px }，Element Plus 组件毫无反应。原因：EP 组件内部字号来自--el-font-size-*变量，不受body字号级联影响。处理：组件层面一律走第 3 步的 CSS 变量方案。