在前端工作中，我们常常需要使用一些样式库来美化页面。其中，常用的样式库之一就是 Material Design Components（MDC），它包含了 Material Design 中的各种界面组件。其中，MDC Typography 就是一套关于文字排版样式的规范和样式集合。
如果我们想在项目中使用 MDC Typography，可以通过 npm 安装 @limetech/mdc-typography 包来快速上手。本篇文章就是介绍如何使用这个 npm 包。
安装
我们可以通过 npm 命令来安装 @limetech/mdc-typography 包：
npm install @limetech/mdc-typography
安装完成后，就可以在项目中使用这个包提供的各种样式类了。
使用
基础用法
使用 MDC Typography 的基础方法是在元素上添加对应的样式类。比如，要将一个段落标签的字体设置为 Roboto，可以添加下面的代码：
<p class="mdc-typography--font-family">Lorem ipsum dolor sit amet.</p>
在这个例子中，我们使用了 mdc-typography--font-family 类，它表示使用了 Roboto 字体。我们还可以使用其他类来设置字体大小、颜色、行高等：
<p class="mdc-typography--font-family mdc-typography--font-size-lg mdc-typography--text-hint-on-background mdc-typography--line-height-2">Lorem ipsum dolor sit amet.</p>
这个例子中，我们使用了四个类，分别表示字体、字体大小、颜色和行高。
邮箱链接
需要将电子邮件地址链接到您的网站上时，可以使用“mailto:”链接。加入一个邮件链接后，用户可以从页面发送电子邮件，而无需将地址复制粘贴到邮件程序中。
HTML“”标记定义链接。包括文本，也就是您希望用户单击以打开链接的名称，还有“href =”属性，这是用于设置链接的目标位置的
下面这个例子需要使用按钮触发事件，分别为用户提供两个连接到 limetech@qq.com 的链接。 邮箱地址 limetech@qq.com 是灵梦科技公司的公共邮箱。 该程序首先为文本链接添加单击事件(通过添加“onclick”属性)，然后根据要执行的操作，决定使用哪个链接。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------ - ------------------ ----------- --------------- ------------------- ------------- ------------------ -
------ - - ----------- --------------------- -
--------
--------
-------- ------- -
---- -- ------- -
------------- - -------------------------------------------------------
- ---- -
-----------------------------------------------------
-
-
---------
-------
------
------------------- ---------
------- ----------------------------------------- --------
------- -----------------------------------------
-------
-------使用样式类的方式虽然方便快捷，但是样式会有较强的耦合性，可能会导致样式冲突或者难以调整。这时候我们可以选择编译后的 CSS 文件，通过直接引入 CSS 文件的方式来完成样式的使用。
引入 CSS 文件
我们将 CSS 文件（node_modules/@limetech/mdc-typography/dist/mdc-typography.css）拷贝到项目的样式文件夹中，比如 styles 文件夹。在 HTML 文件头部，可以添加如下代码引入 CSS 文件：
<link rel="stylesheet" href="styles/mdc-typography.css">
这样，我们就可以使用所有 MDC Typography 提供的样式类了。
总结
通过 npm 包 @limetech/mdc-typography，我们可以很方便地使用 MDC Typography 提供的字体排版样式。本文介绍了包的安装和使用方法，并提供了样式类的基本用法和引入 CSS 文件的方法。在实际开发中，可以根据项目需求，自由选择使用哪些样式类，达到自己想要的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/201071