Element-Plus 修改控件字体
2024/11/8约 284 字小于 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;
}