在前端开发中，常常需要使用一些常规的字体样式，这时候 totem.group.typography 这个 npm 包就能很好地解决这类问题。这个包内置了一些常用的字体样式，例如标题、正文、段落、列表、引用等等。它的优点在于，可以提高编码效率，同时也能使得整个项目风格更加统一。
安装
安装 totem.group.typography 很简单，只需要在命令行中运行以下命令即可：
npm install totem.group.typography
使用
引入
安装成功后，就可以在项目中引入该库。在需要使用的页面中，使用以下代码来引入该库：
import 'totem.group.typography';
使用样式
使用该库的样式很简单。在 HTML 文件中，使用 className 为样式类名即可。例如：
<h1 className="h1">Hello, world!</h1>
使用该库时，需要记住以下几点：
- className 是样式所在的 class 类名。
- totem.group.typography 提供了一些常规的样式，如 h1、h2、h3 等。
- 相应类名对应的样式有完整的响应式布局。
推荐使用方式
推荐将 totem.group.typography 库单独引入一个样式文件中，例如：
@import '~totem.group.typography';
这样可以在局部使用时更加方便，也可以在团队协作中更好地维护统一的样式规范。
示例代码
安装 totem.group.typography
npm install totem.group.typography
引入 totem.group.typography
import 'totem.group.typography';
使用样式
-- -------------------- ---- ------- --- --------------------- ----------- -- ------------------ -- - -------------- --- --------------- -------- ---- ------ -------- ---- ------ ----- ----------- ----------------------- ------- -- - --------------- -------------
推荐方式（使用局部样式文件）
在样式文件中单独引入 totem.group.typography：
@import '~totem.group.typography'; // other styles
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cab81e8991b448e616b