★ FEATURED ARTICLE 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 的changeSizeuseStorage顺手写进 localStorage →App.vue把size绑给el-config-providerElement Plus 自动挂类名、更新组件高度变量刷新后偏好还在。字号想走同样的路也不难设置 store 的 watch → 调setProperty写根节点就是主题色的现成套路照抄即可。接下来还能怎么演进字号接入设置面板加一档特大号按屏幕宽度自动切换字号档位提供紧凑 / 舒适两套字号预设--el-font-size-base是整条链路的起点今天打开 theme.scss 把它从 14 拧到 15刷新页面全站字号就跟着走了。【免费下载链接】vue3-element-admin基于 Vue 3 Vite 7 TypeScript element-plus 构建的后台管理前端模板配套后端源码vue-element-admin 的 vue3 版本。项目地址: https://gitcode.com/GitHub_Trending/vue3/vue3-element-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
