Material Components Web：桌面端body1、body2字体过小的全局调整咨询

安全阿岳

2026-5-21

解决Material Components Web桌面端body1/body2字体过小的问题

我完全懂你的困扰——Material Components Web默认的body1和body2字体尺寸在大尺寸桌面设备上确实偏紧凑，作为主要文本阅读体验不够友好。这里有几种全局统一调整的方案，你可以根据项目情况选择：

方法1：利用CSS变量全局覆盖（推荐）

Material Components Web大量使用CSS变量来控制样式，直接修改根变量是最优雅的方式，所有用到body1/body2的组件都会自动继承新的尺寸：

:root {
  /* 默认body1字体大小通常是0.875rem，你可以改成1rem或更适合的数值 */
  --mdc-typography-body1-font-size: 1rem;
  /* 如果body2也需要调整，比如从默认的0.75rem改成0.875rem */
  --mdc-typography-body2-font-size: 0.875rem;
}

方法2：仅针对大尺寸桌面设备调整（响应式）

如果不想影响移动端的字体大小，只在桌面屏上放大，可以结合媒体查询：

/* 针对宽度≥1200px的桌面设备调整，你可以根据需求修改断点 */
@media (min-width: 1200px) {
  :root {
    --mdc-typography-body1-font-size: 1.125rem;
    --mdc-typography-body2-font-size: 1rem;
  }
}

方法3：直接覆盖类样式（兼容老版本）

如果你的项目用的是较老版本的MDW，CSS变量可能不支持，那就直接针对对应的类名修改：

/* 全局修改body1样式 */
.mdc-typography--body1 {
  font-size: 1rem !important;
}

/* 全局修改body2样式 */
.mdc-typography--body2 {
  font-size: 0.875rem !important;
}

/* 同样可以结合媒体查询做响应式调整 */
@media (min-width: 1200px) {
  .mdc-typography--body1 {
    font-size: 1.125rem !important;
  }
  
  .mdc-typography--body2 {
    font-size: 1rem !important;
  }
}