介绍
Roboto-stylus 是一个 npm 包，提供了 Google 出品的 Roboto 字体的 stylus 实现。将其引入项目后，可以在 stylus 文件中直接使用 Roboto 字体的样式，无需重复编写样式代码，较为方便。本篇文章将深入介绍 roboto-stylus 的使用方法，包括如何安装、引入以及样式的使用等。
安装
在终端中进入项目所在目录，输入以下命令安装 roboto-stylus。
npm install --save roboto-stylus
在 npm 装包时提供了两个主要的选项：
--save选项将 roboto-stylus 添加到当前项目的依赖之中；--save-dev选项则将 roboto-stylus 添加到开发依赖之中。
根据需求选择合适的选项进行安装即可。
引入
roboto-stylus 被安装之后，我们需要将其引入项目并添加至样式文件中。作为一个样式库，roboto-stylus 提供了两种引入方式：一种是使用 stylus 的 @import 语句进行引入，另一种则是使用 css 的 @import 语句进行引入。
使用 stylus 进行引入
在 stylus 文件中，我们可以使用 @import 语句引入 roboto-stylus，如下所示：
@import "node_modules/roboto-stylus/css/roboto";
通过上述语句，我们可以将 roboto 中的样式添加到当前 stylus 文件之中。需要注意的是，须指定 roboto 中的 css 文件路径，此处路径以当前项目为参照进行指定。
使用 css 进行引入
如果我们需要将 roboto-stylus 引入项目中的 css 中，而不是 stylus，可以使用前面提到的 @import 语句进行引入。例如，在 main.css 文件中可以加入以下代码：
@import url(node_modules/roboto-stylus/css/roboto.css);
在 html 中，可以通过以下方式将 main.css 中的样式引入至项目之中：
<link href="css/main.css" rel="stylesheet">
样式使用
引入 roboto-stylus 后，我们就可以在项目中使用其提供的样式了。样式库提供了适用于不同场景的多种样式，本文只介绍其中部分样式的用法，具体可以参考 roboto-stylus 官方文档，链接：https://npmjs.com/package/roboto-stylus。
字体设置
roboto-stylus 提供了多个字体样式，我们可以通过添加字体样式类名对字体进行设置。如下所示：
<h1 class="roboto">This is a title.</h1> <p class="roboto-thin">This is thin text.</p> <p class="roboto-condensed">This is condensed text.</p> <p class="roboto-light" style="font-size:16px">This is light text.</p>
上述代码中，使用了四种不同的样式类，分别对应不同的字体样式。
字体大小/颜色设置
roboto-stylus 提供了多个字体大小/颜色的样式，我们可以通过添加样式类名对字体大小/颜色进行设置。如下所示：
<p class="text-large">This text is big.</p> <p class="text-muted">This text is gray.</p>
辅助样式
除了以上提到的样式，roboto-stylus 还提供了辅助样式供使用，如下所示：
<p class="text-xsmall">This is very small text.</p> <p class="text-primary">This text is blue.</p> <p class="text-uppercase">This text is all uppercase.</p> <p class="text-center">This text is centered.</p> <p class="text-right">This text is right aligned.</p>
结尾
roboto-stylus 提供了诸多便利的字体样式，我们可以根据自身需求进行自由搭配，为项目美化功能带来很大的便利。希望本文对使用 roboto-stylus 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f4d9381d61a3540e66