在前端开发中，样式和排版是非常重要的。不同的文本样式可以使得网页更加美观、易读，并且可以引导用户注意力。但是为了实现这些效果，我们需要花费大量的时间去编写 CSS 样式。为了简化这一过程，我们可以使用 npm 包 primer-marketing-type 来实现文本样式的快速排版。
简介
primer-marketing-type 是一个基础的优化类型设置包，适用于优化主要文本块的排版效果。它提供了超过 40 种标准化的类型排版，支持 h1-h6、p、a、u、b、i、em、strong、sup、sub 等 HTML 标签，并且已经被 GitHub 官方使用。
下面将通过一些实例来介绍如何使用这个 npm 包。
安装
你可以通过 npm 来安装 primer-marketing-type。如果你已经在项目中使用了 npm，则可以在终端中运行以下命令来安装：
npm install primer-marketing-type
使用方法
primer-marketing-type 通过调整字体大小、行距、字重、字体等属性，来优化文本排版效果。你可以分别引入 sass 或者 css 文件来使用这些设置。下面是具体的操作方式：
引入 CSS 文件
首先，在你的 HTML 文件中，使用 link 标签将 CSS 文件引入：
<link rel="stylesheet" href="node_modules/primer-marketing-type/build/build.css" />
引入 Sass 文件
如果你喜欢使用 Sass 文件，则可以在你的 Sass 中引入，并使用 include 语句来使用这些设置。
@import "node_modules/primer-marketing-type/build/build.scss";
设置基础字体大小
你可以通过设置根元素的 font-size 属性，来选择文本的基础字体大小。这个值将作用于所有文本块。例如：
html {
font-size: 16px;
}设置根元素的字体大小为 16px，所有文本块都将继承这个值。
h1-h6 文本样式
你可以使用以下类名，来使用规范的 h1-h6 标题类型样式：
- .h1
- .h2
- .h3
- .h4
- .h5
- .h6
<h1 class="h1">This is an example of H1 element.</h1> <h2 class="h2">This is an example of H2 element.</h2> <h3 class="h3">This is an example of H3 element.</h3> <h4 class="h4">This is an example of H4 element.</h4> <h5 class="h5">This is an example of H5 element.</h5> <h6 class="h6">This is an example of H6 element.</h6>
段落样式
你可以使用以下类名来使用规范的段落类型样式：
- .lead：首段文本
- .text-normal：正常文本
- .text-small：小号文本
<p class="lead">This is an example of lead paragraph.</p> <p class="text-normal">This is an example of normal paragraph.</p> <p class="text-small">This is an example of small paragraph.</p>
其他样式
除了上述样式，primer-marketing-type 还支持其他样式：
- .underline：带下划线文本
- .bold：加粗文本
- .italic：斜体文本
<p class="underline">This is an example of underlined text.</p> <p class="bold">This is an example of bold text.</p> <p class="italic">This is an example of italicized text.</p>
总结
通过使用 npm 包 primer-marketing-type，我们可以快速地为文本样式添加排版效果，有助于提高页面美观度和可读性。在真实项目中，我们可以根据自己的需求修改这些样式，以满足特定的排版要求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3e74ffdbf7be33b2567173