Angular Material 字体排印

什么是字体排印？

字体排印是一种以清晰、可读和美观的方式排列文本的方法。 Angular Material 的字体排印基于从 material 设计意象中派生的指南，并在字体排印级别内组织。 每个级别都有一个大小、行高和字重。

CSS 类提供了用于字体排印。 您可以使用它们在您的应用程序中创建视觉一致性。

以下是各个级别

字体排印被收集到字体排印配置中，该配置用于生成 CSS。

首先包含Roboto字体，并使用300、400和500粗细开始。 您可以从 Google Fonts 中包含它

您可以将相应的 CSS 类添加到要设置样式的元素中

Angular content 尚未实现任何全局 CSS。 要更广泛地应用库的排版样式，您可以利用 mat-typography CSS 类。 此类将设置后代根元素的样式。

定制

字体排印定制是基于 sass 的 Angular 内容主题的扩展。

根据示例，排版配置使用mat-typography-configuration 函数创建，描述了字体系列和排版级别。 排版级别由matte-typography-level 函数定义，需要行高和字重。 字体系列在引号中。

创建自定义排版定义后，通过不同的 sass 混合使用它来生成样式。

如果您正在使用内容主题，则可以将排版配置传递给 matte-core

您自定义 CSS 中的内容排版

Angular 内容包含您可以用来定制组件的排版实用程序和函数：-

• mat-font-size ($ config, $ level) - 它根据提供的配置和级别获取字号。
• mat-font-family ($ config) - 它根据提供的配置获取字体系列。
• mat-line-height ($ config, $ level) - 它根据提供的配置和级别获取行高。
• mat-font-weight ($ config, $ level) - 它根据给定的配置和级别获取字重。
• mat-typography-level-to-styles ($ config, $ level) - 它配置对象和排版级别，并输出简写 CSS 字体声明。

常规字体排印

AngularJS Material 使用 Roboto 字体进行组件。

AngularJS 内容不会加载 Roboto 字体。 开发人员负责加载应用程序中使用的所有字体。

标题样式

您应该使用样式类设置 <h1> <h6> 标题标签的样式

输出