Material Design 是 Google 推出的一种用户界面设计语言，目的是为了推广设计的统一性和流畅性。在 Material Design 中，字体规范是重要的一部分，因为字体对用户阅读体验和 UI 设计风格有巨大的影响。本文将详细介绍 Material Design 中的字体规范，并提供相关的示例代码供读者学习和参考。
Typographic Scale
在 Material Design 中，Typographic Scale 是一种常用的字体比例尺，它包括了页面中使用的所有字体和文字大小。它的目的是提供一种标准的方式来确定标题、副标题、段落和其他文本元素的字体大小和样式。Typographic Scale 包含以下几种类型的字体规范：
Headline
Headline 是用来吸引用户注意力的大标题，一般用于页面或部分的开头。在 Material Design 中，Headline 字体规范包含六个不同的级别，分别为 H1, H2, H3, H4, H5 和 H6，其中，H1 的字体最大，H6 的字体最小。下面是相关代码示例：
-- -------------------- ---- ------- -- -- -- ---------- ----- ------------ ---- --------------- ------- -- -- -- ---------- ----- ------------ ---- --------------- ------- -- -- -- ---------- ----- ------------ ---- -- -- -- ---------- ----- ------------ ---- -- -- -- ---------- ----- ------------ ---- --------------- ------ -- -- -- ---------- ----- ------------ ---- --------------- -------
Subheading
Subheading 是次要标题或副标题，一般用于区分Headline 标题下的细节信息。在 Material Design 中，Subheading 字体规范包含两个不同的级别，分别为 Subtitle 1 和 Subtitle 2，其中 Subtitle 1 比 Subtitle 2 字体大一些。下面是相关代码示例：
-- -------------------- ---- ------- -- -------- - -- ---------- ----- ------------ ---- --------------- ------- ------------ ------ -- -------- - -- ---------- ----- ------------ ---- --------------- ------ ------------ ------
Body
Body 是页面中最常使用的字体规范，包括主要段落和正文文本。在 Material Design 中，Body 字体规范包含两个不同的级别，分别为 Body 1 和 Body 2，其中 Body 1 比 Body 2 字体大一些。下面是相关代码示例：
-- -------------------- ---- ------- -- ---- - -- ---------- ----- ------------ ---- --------------- ------ ------------ ------ -- ---- - -- ---------- ----- ------------ ---- --------------- ------- ------------ ------
Caption
Caption 是页面中用于介绍对象或宣传语的文本。在 Material Design 中，Caption 字体规范包含两个不同的级别，分别为 Caption 和 Caption 2，其中 Caption 比 Caption 2 字体大一些。下面是相关代码示例：
-- -------------------- ---- ------- -- ------- -- ---------- ----- ------------ ---- --------------- ------ ------------ ------ -- ------- - -- ---------- ----- ------------ ---- --------------- ------ ------------ ------
字体家族
Material Design 中，Roboto 字体系列是默认字体系列，是一种具有可读性的中等宽度字体。Robusto 字体系列基于无衬线字体，具有创新的设计和现代的表现形式。下面是在 CSS 中设置 Roboto 字体的代码示例：
-- -------------------- ---- ------- -- ---------- -- -------- - ------------ --------- ----------- - -- ------- -- ---- - ------------ --------- ----------- -
除了 Roboto 字体之外，Material Design 中还包括了几种不同的字体家族，例如：
- Material Icons：用于图标标记，具有清晰的一个图形图像，方便将其转成 Icon 库；
- Noto Sans：用于多语言文本和多重形态文本，能够以高质量和连续性来显示很多文字。
- Productivity Font：一种用于增加阅读体验和提高文档可读性的字体系列。
字间距和行间距
字间距和行间距对于阅读体验和页面设计都有重要的作用。在 Material Design 中，字间距和行间距定义如下：
字间距
字间距定义了单个字母之间的空隙大小。在 Material Design 中，各个级别的字体规范都包含了不同的字间距，如下所示：
-- -------------------- ---- ------- -- -------- -- --------------- ------- -- -- --------------- ------- -- -- --------------- ------ -- -- -- ---------- -- --------------- ------- -- -------- - --------------- ------ -- -------- - -- ---- -- --------------- ------ -- ---- - --------------- ------- -- ---- - -- ------- -- --------------- ------ -- ------- --------------- ------ -- ------- -
行间距
行间距定义了每行文字之间的空隙大小。在 Material Design 中，各个级别的字体规范都包含了不同的行距，如下所示：
-- -------------------- ---- ------- -- -------- -- ------------ ------ -- ---------- -- ------------ ------ -- ---- -- ------------ ------ -- ------- -- ------------ ------
总结
字体规范是制作 Material Design 网站时必须要遵循的一点。在设计中保持字体规范的规范性和一致性可以提高整体页面的美感，并加强用户体验。在此，通过介绍 Material Design 中的字体规范及相应代码，希望读者可以更好地了解并应用 Material Design 中的字体规范，从渐进式提升用户体验中获得更多的品牌影响力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648be03548841e9894a2bf69