Element-Plus 修改控件字体
2024年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;
}