求助：Angular Material输入标签因自定义字体覆盖出现文本裁剪问题

我之前也碰到过类似的Angular Material自定义字体引发的文本裁剪问题，分享几个亲测有效的解决方案给你：

1. 调整全局Typography配置的行高与基线参数 #

Angular Material的mat-typography-config里除了字体族，还有针对不同组件的行高、字号等参数。Open Sans的字形基线和行高默认值和Roboto不匹配，是导致裁剪的核心原因之一。你可以针对输入框和标签单独配置适配的数值：

$custom-typography: mat-typography-config(
  $font-family: 'Open Sans, sans-serif',
  // 针对输入框文本调整行高
  $input: mat-typography-level(16px, 24px, 400),
  // 专门给输入标签设置合适的行高与字号
  $label: mat-typography-level(14px, 20px, 500)
);

这里的行高建议比字体大小大8-10px，给字形上下留出足够的显示空间。

2. 直接给输入标签添加局部样式修复 #

如果全局Typography调整没达到预期，可以直接针对标签元素写CSS规则，强制调整行高或内边距：

.mat-form-field-label {
  line-height: 1.5; /* 增大行高，避免字形被容器裁切 */
  padding-top: 2px; /* 上下添少量内边距，适配Open Sans的字形高度 */
  padding-bottom: 2px;
}

你可以根据实际显示效果微调line-height和内边距的数值。

3. 检查字体渲染与加载设置 #

有些自定义字体本身的字形度量（比如ascent/descent值）和Roboto差异较大，也会导致布局计算出错。可以尝试添加以下CSS规则优化渲染：

.mat-form-field * {
  font-display: swap; /* 确保字体加载过程中不会出现布局偏移 */
  -webkit-font-smoothing: antialiased; /* 让字体渲染更平滑，减少裁切感 */
}

另外你之前用input.mat-input-element { height:100%; }修复输入框的思路是对的，标签的问题本质也是自定义字体和Material默认布局不匹配，上面的方法应该能解决你的问题。如果还是不行，可以试试给表单字段容器调整最小高度：

.mat-form-field {
  min-height: 56px; /* 根据你的字体和布局需求调整 */
}

内容的提问来源于stack exchange，提问作者AT_Fresh_Dev