自定义排版

排版是一种排列字体的方式，使文本在显示时清晰易读且吸引人。Angular Material 的主题体系支持自定义库组件的排版设置。此外，Angular Material 提供了用于将排版样式应用于你的应用程序中元素的 API。

Angular Material 的主题 API 是用 Sass 构建的。本文档假设你熟悉 CSS 和 Sass 的基础知识，包括变量、函数和 mixin。

Angular Material 的排版 API 允许你指定任何字体。默认 font-face 值配置为具有 300、400 和 500 三种字体粗细风格的 Google Roboto 字体。要使用 Roboto，你的应用程序必须加载字体，该字体不包含在 Angular Material 中。加载 Roboto 或任何其他自定义字体的最简单方法是使用 Google 字体。以下代码段可以放置在你的应用程序的 <head> 中，以从 Google Fonts 中加载 Roboto。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">

有关使用 Google Fonts 的更多信息，请参阅 Google Fonts API 入门。另请注意，默认情况下， Angular CLI 会内联来自 Google Fonts 的资产以减少会阻塞渲染的请求。

排版级别是与应用程序结构的特定部分（例如标题）相对应的排版样式的集合。每个级别包括字体系列、字体粗细、字体大小和字母间距的样式。 Angular Material 使用 2018 版 Material Design 规范中的排版级别，如下表所示。

名称 描述
headline-1 一次性标题，通常位于页面顶部（例如英雄标题）。
headline-2 一次性标题，通常位于页面顶部（例如英雄标题）。
headline-3 一次性标题，通常位于页面顶部（例如英雄标题）。
headline-4 一次性标题，通常位于页面顶部（例如英雄标题）。
headline-5 对应于 <h1> 标签的节标题。
headline-6 对应于 <h2> 标签的节标题。
subtitle-1 对应于 <h3> 标签的节标题。
subtitle-2 对应于 <h4> 标签的节标题。
body-1 基本正文文本。
body-2 次要正文文本。
caption 较小的正文和提示文本。
button 按钮和锚点。

你可以使用 Sass 函数 define-typography-level 来定义排版级别。此函数依次接受 font-size 、 line-height 、 font-weight 、 font-family 和 letter-spacing 这些 CSS 值。你还可以按名称指定参数，如下例所示。

@use '@angular/material' as mat;

$my-custom-level: mat.define-typography-level(
  $font-family: Roboto,
  $font-weight: 400,
  $font-size: 1rem,
  $line-height: 1,
  $letter-spacing: normal,
);

排版配置是所有排版级别的集合。 Angular Material 将此配置表示为 Sass 映射表。此主题体系的映射表包含每个级别的样式，按名称键入。你可以使用 Sass 函数 define-typography-config 创建一个排版配置。 define-typography-config 的每个参数都是可选的；如果未指定，级别的样式将默认为 Material Design 的基线级别。

@use '@angular/material' as mat;

$my-custom-typography-config: mat.define-typography-config(
  $headline-1: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $headline-2: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $headline-3: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $headline-4: mat.define-typography-level(34px, 40px, 400),
  $headline-5: mat.define-typography-level(24px, 32px, 400),
  // ...
);

当你通过定义主题来定制排版样式时，可以提供一个排版配置。参见 主题指南 以深入了解如何自定义主题。

下面的示例显示了一个典型的主题定义和一个“kids 主题”，它仅在 ".kids-theme" CSS 类存在时才适用。你可以查看主题指南以获取有关定义多个主题的更多指导。

@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-typography: mat.define-typography-config();

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
 ),
  typography: $my-typography,
));

@include mat.all-component-themes($my-theme);

.kids-theme {
  $kids-primary: mat.define-palette(mat.$cyan-palette);
  $kids-accent: mat.define-palette(mat.$yellow-palette);

  // Typography config based on the default, but using "Comic Sans" as the
  // default font family for all levels.
  $kids-typography: mat.define-typography-config(
    $font-family: 'Comic Sans',
  );

  $kids-theme: mat.define-light-theme((
   color: (
     primary: $kids-primary,
     accent: $kids-accent,
   ),
   typography: $kids-typography,
  ));

  @include mat.all-component-themes($kids-theme);
}

每个组件还有一个 typography mixin，它根据提供的排版配置生成该组件的排版样式。以下示例演示了如何仅为按钮组件应用排版样式。

@use '@angular/material' as mat;

$kids-typography: mat.define-typography-config(
  // Specify "Comic Sans" as the default font family for all levels.
  $font-family: 'Comic Sans',
);

// Now we have sweet buttons with Comic Sans.
@include mat.button-typography($kids-typography);

除了组件之间共享的样式之外， typography-hierarchy mixin 还包括用于设计应用程序样式的 CSS 类。 这些 CSS 类对应于版式配置中的版式级别。 此 mixin 还为 .mat-typography CSS 类范围内的本机标题元素发出样式。

@use '@angular/material' as mat;

// Use the default configuration.
$my-typography: mat.define-typography-config();
@include mat.typography-hierarchy($my-typography);

下表列出了发出的 CSS 类和样式化的原生元素。

CSS 类 级别名称 原生元素
.mat-headline-1 headline-1 无
.mat-headline-2 headline-2 无
.mat-headline-3 headline-3 无
.mat-headline-4 headline-4 无
.mat-h1 或 .mat-headline-5 headline-5 <h1>
.mat-h2 或 .mat-headline-6 headline-6 <h2>
.mat-h3 或 .mat-subtitle-1 subtitle-1 <h3>
.mat-h4 或 .mat-body-1 body-1 <h4>
.mat-h5 无 <h5>
.mat-h6 无 <h6>
.mat-body 或 .mat-body-2 body-2 正文文本
.mat-body-strong 或 .mat-subtitle-2 subtitle-2 无
.mat-small 或 .mat-caption caption 无

除了排版样式，这些样式规则还包括 header 和 p 的 margin-bottom 。对于 body-1 样式，文本在所提供的 CSS 选择器中设置样式。

.mat-h5 和 .mat-h6 样式不直接对应于特定的 Material Design 排版级别。 .mat-h5 样式使用 body-2 级别，字体大小按比例缩小至 0.83 倍。 .mat-h6 样式使用 body-2 级别，字体大小按比例缩小至 0.67 倍。

button 和 input 的排版级别没有映射到 CSS 类。

以下示例演示了 typography-hierarchy mixin 生成的排版样式的用法。

<body>
  <!-- This header will *not* be styled because it is outside `.mat-typography` -->
  <h1>Top header</h1>

  <!-- This paragraph will be styled as `body-1` via the `.mat-body` CSS class applied -->
  <p class="mat-body">Introductory text</p>

  <div class="mat-typography">
    <!-- This header will be styled as `title` because it is inside `.mat-typography` -->
    <h2>Inner header</h2>

    <!-- This paragraph will be styled as `body-1` because it is inside `.mat-typography` -->
    <p>Some inner text</p>
  </div>
</body>

可以从主题中读取排版属性并在你自己的组件中使用。有关此主题的更多信息，请参阅我们关于 主题化你自己的组件 的指南。