elementui 字体

修改 Element UI 默认字体

Element UI 默认使用系统字体（如 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto 等）。要修改全局字体，可通过覆盖 CSS 变量或自定义主题。

全局覆盖 CSS 变量

在项目的全局 CSS 文件中（如 App.vue 或 main.css）添加以下代码：

:root {
  --el-font-family: 'YourFontName', sans-serif;
}

替换 'YourFontName' 为实际字体名称（如 'PingFang SC', 'Microsoft YaHei' 等）。

通过 SCSS 自定义主题

若使用 SCSS，修改主题变量文件（如 element-variables.scss）：

$--font-family: 'YourFontName', sans-serif;
@import '~element-ui/packages/theme-chalk/src/index';

单独组件字体修改

针对特定组件，可通过样式穿透修改：

.el-button {
  font-family: 'YourCustomFont' !important;
}

注意事项

1. 确保自定义字体已正确引入（通过 @font-face 或 CDN）。
2. 中文字体需考虑许可问题，推荐使用系统自带字体或开源字体（如思源黑体）。
3. 修改后需清理构建缓存重新编译项目。

推荐字体组合

中文环境下可考虑：

--el-font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;