介绍
Roboto-stylus 是一个 npm 包，提供了 Google 出品的 Roboto 字体的 stylus 实现。将其引入项目后，可以在 stylus 文件中直接使用 Roboto 字体的样式，无需重复编写样式代码，较为方便。本篇文章将深入介绍 roboto-stylus 的使用方法，包括如何安装、引入以及样式的使用等。
安装
在终端中进入项目所在目录，输入以下命令安装 roboto-stylus。
--- ------- ------ -------------
在 npm 装包时提供了两个主要的选项：
--save选项将 roboto-stylus 添加到当前项目的依赖之中；--save-dev选项则将 roboto-stylus 添加到开发依赖之中。
根据需求选择合适的选项进行安装即可。
引入
roboto-stylus 被安装之后，我们需要将其引入项目并添加至样式文件中。作为一个样式库，roboto-stylus 提供了两种引入方式：一种是使用 stylus 的 @import 语句进行引入，另一种则是使用 css 的 @import 语句进行引入。
使用 stylus 进行引入
在 stylus 文件中，我们可以使用 @import 语句引入 roboto-stylus，如下所示：
------- ----------------------------------------
通过上述语句，我们可以将 roboto 中的样式添加到当前 stylus 文件之中。需要注意的是，须指定 roboto 中的 css 文件路径，此处路径以当前项目为参照进行指定。
使用 css 进行引入
如果我们需要将 roboto-stylus 引入项目中的 css 中，而不是 stylus，可以使用前面提到的 @import 语句进行引入。例如，在 main.css 文件中可以加入以下代码：
------- -----------------------------------------------
在 html 中，可以通过以下方式将 main.css 中的样式引入至项目之中：
----- ------------------- -----------------
样式使用
引入 roboto-stylus 后，我们就可以在项目中使用其提供的样式了。样式库提供了适用于不同场景的多种样式，本文只介绍其中部分样式的用法，具体可以参考 roboto-stylus 官方文档，链接：https://npmjs.com/package/roboto-stylus。
字体设置
roboto-stylus 提供了多个字体样式，我们可以通过添加字体样式类名对字体进行设置。如下所示：
--- ------------------- -- - ----------- -- ------------------------ -- ---- --------- -- ----------------------------- -- --------- --------- -- -------------------- --------------------------- -- ----- ---------
上述代码中，使用了四种不同的样式类，分别对应不同的字体样式。
字体大小/颜色设置
roboto-stylus 提供了多个字体大小/颜色的样式，我们可以通过添加样式类名对字体大小/颜色进行设置。如下所示：
-- ----------------------- ---- -- -------- -- ----------------------- ---- -- ---------
辅助样式
除了以上提到的样式，roboto-stylus 还提供了辅助样式供使用，如下所示：
-- ------------------------ -- ---- ----- --------- -- ------------------------- ---- -- --------- -- --------------------------- ---- -- --- -------------- -- ------------------------ ---- -- ------------- -- ----------------------- ---- -- ----- ------------
结尾
roboto-stylus 提供了诸多便利的字体样式，我们可以根据自身需求进行自由搭配，为项目美化功能带来很大的便利。希望本文对使用 roboto-stylus 有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668f4d9381d61a3540e66