Angular Material修改input字体为28px后字符下伸部分被截断求助

我太懂这种字体下伸部分（比如'g'、'y'）被截断的糟心情况了！只修改input的font-size肯定不够，因为Angular Material的输入组件是由多层容器和内部元素组成的，默认的高度、行高和内边距都是为默认字体大小设计的，放大字体后这些参数就跟不上了。你需要调整以下几个关键的样式类：

1. 调整输入框核心元素的行高与高度 #

Angular Material的实际输入内容是放在.mat-input-element这个类里的，默认的行高和高度太小，放大字体后放不下下伸部分：

/* 如果是组件内样式，需要加::ng-deep穿透封装，全局样式则不需要 */
::ng-deep .mat-input-element {
  font-size: 28px;
  line-height: 1.5; /* 根据你用的字体调整，一般1.4-1.6之间比较合适 */
  height: auto; /* 让高度自适应内容，或者直接设置固定值比如38px */
}

这里的line-height是关键，它决定了文本行的垂直空间，必须足够容纳字体的下伸部分。

2. 调整表单字段容器的高度与内边距 #

如果你的输入框用的是outline外观（最常见的样式），外层的.mat-form-field-outline容器高度也需要同步调整，否则会把输入内容截断：

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  height: 48px; /* 比输入元素的高度大一些，留出上下空间 */
}

::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
  padding-bottom: 1.25em; /* 调整底部内边距，避免下伸部分被容器底部截断 */
}

如果是fill外观的输入框，就把上面的.mat-form-field-appearance-outline换成.mat-form-field-appearance-fill即可。

3. 同步调整浮动标签（如果有）的样式 #

如果你的输入框带有浮动标签（比如mat-label），放大字体后标签的位置可能会挤压输入内容的空间，需要同步调整：

::ng-deep .mat-form-field-label {
  font-size: 28px; /* 和输入字体大小保持一致 */
  top: 1.6em; /* 调整标签的垂直位置，避免和输入内容重叠 */
}

注意事项 #

• 如果你是在组件的SCSS文件里写这些样式，必须加上::ng-deep（或者使用ViewEncapsulation.None）来穿透Angular的样式封装，否则样式不会生效到Material组件内部。
• 全局样式文件（比如styles.scss）里写的话，不需要::ng-deep，直接写类名即可。

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