elementui字号

Element UI 字号设置方法

Element UI 默认使用 14px 作为基础字号，但可以通过以下方式自定义：

修改全局主题变量

在项目中新建 SCSS 文件（如 element-variables.scss），覆盖默认字号变量：

$--font-size-base: 16px;
@import '~element-ui/packages/theme-chalk/src/index';

通过 CSS 覆盖

直接修改组件样式（需确保样式优先级）：

.el-button {
  font-size: 16px;
}

配置按需加载时的默认尺寸

在使用 babel-plugin-component 按需引入时，可配置默认尺寸：

plugins: [
  [
    "component",
    {
      libraryName: "element-ui",
      styleLibraryName: "theme-chalk",
      style: {
        base: {
          fontSize: '16px'
        }
      }
    }
  ]
]

响应式字号方案

结合 CSS 变量实现动态调整：

:root {
  --el-font-size: clamp(14px, 2vw, 16px);
}
.el-button {
  font-size: var(--el-font-size);
}

字号层级关系

Element UI 采用分层字号体系：

• 基础正文：$--font-size-base（默认14px）
• 小号文本：$--font-size-small（默认13px）
• 更小文本：$--font-size-extra-small（默认12px）
• 标题字号：通过 $--font-size-large 等变量控制

注意事项

1. 修改全局变量后需要重新编译主题
2. 行高会随字号自动按比例调整（默认1.5倍）
3. 表单元素的字号会影响整体布局尺寸
4. 弹窗类组件的字号需单独调整时，建议使用自定义类名

通过以上方法可实现从组件级别到全局的字号定制化需求。