Material Design 是谷歌在 2014 年提出的一个全新的设计语言，旨在为移动设备、桌面端和 Web 应用提供可预测的、统一的用户体验。其中，文字排版是一个重要的方面。在本文中，我们将讨论 Material Design 文字排版的使用指南，包括字体、字号、行高、对齐方式等等。
字体
在 Material Design 中，谷歌推荐使用 Roboto 字体，这是一种现代、人性化的无衬线字体，可以在谷歌 Fonts 网站上获取。如果您的应用程序无法使用 Roboto，您可以使用 Material Design Iconic 字体或者您自己选择的无衬线字体。
<!-- 谷歌 Fonts 上的 Roboto --> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet"> <!-- Material Design Iconic 字体 --> <link href="//cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" rel="stylesheet" />
字号
在 Material Design 中，字号以 sp 单位表示，这是 Android 平台上的一个特殊单位，可以根据屏幕密度自适应地缩放字体大小。Material Design 提供了标准字号范围，其中包括 H1 至 H6、subtitle1 至 subtitle2 和 body1 至 body2 共 11 种大小的字体。
-- -------------------- ---- ------- ---- -- - -- --- --- ----------------- ------------- ------ --- ----------------- ------------- ------ --- ----------------- ------------- ------ --- ----------------- ------------- ------ --- ----------------- ------------- ------ --- ----------------- ------------- ------ ---- --------- - --------- --- ---- ----------------- ----- ------------ ------------- ------- ---- ----------------- ----- ------------ ------------- ------- ---- ----- - ----- --- -- ----------------- ---------- ----- -- ----------------- ---------- -----
行高
行高决定了每一行文字之间的垂直距离，可以用一个简单的公式来计算：
行高 = 字号 x 行高系数
在 Material Design 中，行高系数以等于或大于 1 的小数表示。根据谷歌的建议，正文应该使用 1.5 的行高系数，标题应该使用 1.2 的行高系数。
-- -------------------- ---- ------- -- ---- -- ---- - ---------- ----- ------------ ---- - -- ---- -- --- --- --- --- --- -- - ------------ ---- -
对齐方式
在 Material Design 中，不同的元素对齐方式有不同的建议。
段落对齐
正文和其他段落文字建议使用左对齐或两端对齐，但是右对齐或居中对齐也可以使用。
-- -------------------- ---- ------- -- --- -- - - ----------- ----- - -- ---- -- - - ----------- -------- - -- --- -- - - ----------- ------ - -- ---- -- - - ----------- ------- -
标题对齐
标题应该采用左对齐，如果需要居中对齐，可以通过包裹元素来实现。
-- -------------------- ---- ------- -- --- -- --- --- --- --- --- -- - ----------- ----- - -- ---- -- --- --- --- --- --- -- - ----------- ------- ------- - ----- ------ ------------ -
结论
好的排版可以提高用户的阅读体验和理解率，而 Material Design 提供了一套优秀的排版指南和标准，为前端开发人员提供了一个可参考的样式库。在项目中，我们应该根据具体情况综合考虑，选择合适的字体、字号、行高和对齐方式，以达到最佳的排版效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee87e26fbf96019723a7bf