Angular Material：更改输入剪辑文本的字体大小

Question

我正在将 Angular Material inputs的字体大小修改为 28px，但这会导致某些字符的下降部分被剪裁，例如本例中的“g”：

不能为我的生活找出如何解决这个问题。任何人的想法？我需要扩充哪些课程？

我在 SCSS 中修改了我的组件，如下所示：

input {
  font-size: 28px;
}

Answer 1

如果要更改font-size为mat-form-field，则应将样式应用于mat-form-field元素，而不是input元素。如果不这样做，表单字段的某些部分可能无法正确响应（风格明智）。line-height出于同样的原因，您还应该确保正确设置。

如果您打算坚持材料设计，那么您应该使用实用程序并使用主题/排版mat-typography-level-to-styles以及材料设计指定的排版级别之一来创建您的风格。这应该使用排版实用程序完成，但您可以手动完成。有关详细信息，请参阅https://material.angular.io/guide/typography。

例如，24px 是 Angular Material 调用的字体大小headline（材料设计中的 H5 - 不是 H5 元素），因此您的样式应该实现适当的标题规范（根据 Angular Material 对 H5 的实现）：

.input-headline {
    font-size: 28px;
    line-height: 32px;
    font-weight: 400;
}

Angular Material 有方便的样式类来为你做这件事。对于标题，mat-headline您可以轻松地执行以下操作：

<mat-form-field class="mat-headline">

请注意，28px 不是材料设计指定的字体级别：https : //material.io/design/typography/the-type-system.html#type-scale。