Element-Plus 修改控件字体

undefined2024年11月8日约 285 字小于 1 分钟

部分Element-Plus控件不跟随网站body设置，而是使用Element-Plus配置文件中的默认项。

// Typography
$font-family: () !default;
$font-family: map.merge(
  (
    // default family
    '':
      "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif"
  ),
  $font-family
);

它的字体在配置文件是写死的，而且官方并没有提供办法修改。如果修改mode_modules，推送到流水线后并不会同步，只能用其他方法。

在浏览器开发人员工具里可以发现，

button控件的文字是由span包裹的，通过修改span的全局css以修改按钮内字体。不仅仅是button，绝大多数的组件字体都可以通过这种方式修改。

span {
	font-family: MiSans-Regular;
}

很显然，input控件并不跟随span控件。在浏览器开发人员工具里可以发现，

input控件内的文字并不是被包裹的，而是写在placeholder内，所以修改span并不会影响到input控件。我们需要另外修改input控件。

input {
	font-family: MiSans-Regular;
}