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

【问题标题】：Angular Material: changing font size of input clips textAngular Material：更改输入剪辑文本的字体大小
【发布时间】：2018-06-01 15:38:31
【问题描述】：

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

我这辈子都想不出如何解决这个问题。有什么想法吗？我需要扩充哪些类？

我在 SCSS 中这样修改了我的组件：

input {
  font-size: 28px;
}

【问题讨论】：

你是如何修改字体大小的。分享你的 CSS。
上面已经完成了。
在这里工作正常 - stackblitz.com/edit/angular-gjkbqm - 但你可以拥有正在应用的全局样式。一些padding-bottom 应该修复它。您可能还想显示相关的 HTML 代码。

标签： angular material-design angular-material

【解决方案1】：

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

如果您打算坚持 Material Design，那么您应该使用实用程序并使用 mat-typography-level-to-styles 的主题/排版和 Material Design 指定的排版级别之一来创建您的风格。这应该使用排版实用程序完成，但您可以手动完成。详情请见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 不是 Material Design 指定的字体级别：https://material.io/design/typography/the-type-system.html#type-scale。

【讨论】：

【解决方案2】：

当您使用材质主题时，可以使用材质来定义排版

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

【讨论】：