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

接了个老项目，老板说"字太小看不清"。你把fontSize从 14 改到 15，刷新页面，表格一点没变。这不是你的问题——这套模板里，字号其实由两套东西各管一段。

一个文件改默认值：先认清两个"尺寸开关"

先说结论：模板设置面板里那个尺寸选择器，控制的是组件档位（default/large/small），它只改按钮高度和 padding，不碰字号。真正决定文字大小的是 Element Plus 的 CSS 变量--el-font-size-base，默认 14px。

想给整个项目换个默认字号，改一个地方就够了。打开 theme.scss，在:root里加一行：

:root { --el-font-size-base: 15px; }

所有按钮、表单、表格的文字都读这个变量，改一处全站生效，不用碰任何组件。

只想微调某个组件？把规则写到 element-plus-overrides.scss 这类全局样式文件里，用组件根类名包住即可：

.el-table { --el-font-size-base: 13px; }

CSS 变量链路：SCSS 变量 → CSS 自定义属性 → setProperty

想统一管控字号，链路是三段式，由浅入深。

最底层是构建期：element-plus-vars.scss 用@forward ... with预映射了 Element Plus 的 Sass 变量，目前只覆盖了颜色，但字号同样可以进这张"尺寸地图"，凡是走 Sass 编译的组件样式会统一吃到：

@forward "element-plus/theme-chalk/src/common/var.scss" with ( $font-size: ( "base": 15px, "large": 16px, ) );

中间层是运行时：CSS 自定义属性是总闸，--el-table-font-size、--el-form-label-font-size这类变量都能单独拧，上一条表格示例就是这一层，改完即时生效、无需重新构建。

最上层是动态注入：setProperty写根节点变量。项目的主题色切换就是这么做的——theme.ts 里的applyTheme把一组颜色逐个写到document.documentElement上，字号完全可以复制这条路：

export function setFontSize(size: number) { document.documentElement.style.setProperty("--el-font-size-base", `${size}px`); }

三层各管一段：SCSS 变量定编译期默认，CSS 变量管运行时覆盖，setProperty负责随时改。

改了不生效？三步自查

现象：顶栏尺寸下拉切成"大型"，字纹丝不动。根因：档位只改--el-component-size那一组高宽变量，字号不在它的管辖范围。解法：回到--el-font-size-base上改，别在档位里找字号。

现象：在业务组件的<style scoped>里写了.el-table { font-size: 13px }，页面没反应。根因：scoped 给选择器追加了哈希后缀，匹配不到 Element Plus 渲染的内部节点，全局规则也盖不住组件内部。解法：把这类覆盖挪进全局样式文件，靠组件根类名生效。

现象：改了--el-font-size-base，大部分组件变了，个别地方没跟。根因：个别样式（包括部分布局样式和第三方组件）直接写了14px字面量，压根不读变量。解法：全局搜一下font-size: 14，把命中的字面量换成var(--el-font-size-base)。

源码里这条链路怎么走

顶栏的尺寸选择器触发 change 事件 → 调 app store 的changeSize，useStorage顺手写进 localStorage →App.vue把size绑给el-config-provider，Element Plus 自动挂类名、更新组件高度变量，刷新后偏好还在。

字号想走同样的路也不难：设置 store 的 watch → 调setProperty写根节点，就是主题色的现成套路，照抄即可。