角度材质：更改输入剪辑的字体大小

Question

我正在将Angular Material input的字体大小修改为28px，但这会导致某些字符的the descenders被剪裁，就像本例中的'g'一样：

不能为我的生活弄清楚如何解决这个问题。任何人的想法？我需要增加哪些课程？

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

input {
  font-size: 28px;
}

Answer 1

如果您要更改font-size的{​​{1}}，则应将样式应用于mat-form-field元素，而不是mat-form-field元素。如果不这样做，表单字段的某些部分可能无法正确响应（样式方式）。您还应确保根据相同原因正确设置input。

如果您打算坚持材料设计，那么您应该使用实用程序并使用带有line-height的主题/排版和Material Design指定的排版级别之一创建样式。 应使用排版工具完成，但您可以手动完成。有关详细信息，请参阅https://material.angular.io/guide/typography。

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

headline

Angular Material有便利的样式类，可以帮到你。标题是.input-headline { font-size: 28px; line-height: 32px; font-weight: 400; } 所以你可以轻松地做到：

mat-headline

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

Answer 2

使用材质主题时，可以用材质定义版式

$typography: mat-typography-config(
  $input: mat-typography-level(14px, 1.125, 400),
);
@include mat-core($typography);