在前端开发中，使用字体通常是一个基本需求。而 orator-npm-webfont 是一个可以让你快速在 web 项目中使用 orator 字体的工具包。在本篇文章中，我们将详细介绍如何使用 orator-npm-webfont。
什么是 orator-npm-webfont？
orator-npm-webfont 是一个基于 npm 的开源包，它包含了 orator 字体在 web 应用中使用的全部资源，以及打包和引用或ator 字体的工具。具体包含以下资源：
- 字体文件
- 样式文件
- 源代码
这使得 orator-npm-webfont 能够帮助开发者快速方便地上手使用 orator 字体，而不必担心繁琐的打包和引用流程。
安装 orator-npm-webfont
orator-npm-webfont 可以通过 npm 初始化安装。
打开终端，通过以下命令来新建项目。
npx create-react-app my-app
安装依赖。
cd my-app npm install orator-npm-webfont --save
配置 orator-npm-webfont
接下来，我们需要配置 orator-npm-webfont，以便在项目中引用。
首先，打开你项目的 CSS 文件，添加以下语句。
@import url('https://unpkg.com/orator-npm-webfont');这将引入 orator-npm-webfont 的样式文件，让我们可以使用 orator 字体。
接下来，我们需要加载字体文件。在项目根目录下创建一个新的文件夹，名为 fonts。
mkdir fonts
将 orator-npm-webfont 包中的字体文件全部复制到该目录下。
cp node_modules/orator-npm-webfont/fonts/* fonts/
最后，打开你的 CSS 文件，添加以下语句，以引入字体。
@font-face {
font-family: 'oratorRegular';
src: url('./fonts/orator-webfont.woff2') format('woff2'),
url('./fonts/orator-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}这将告诉你的 web 应用程序在运行时从下载的字体文件中使用字体。
使用 orator-npm-webfont
现在，我们已经完成了整个 orator-npm-webfont 的配置流程。接下来，我们将说明如何在项目中使用 orator 字体。
<style>
h1 {
font-family: 'oratorRegular', sans-serif;
font-size: 48px;
}
</style>
<h1>Hello orator!</h1>如上所示，我们通过 font-family 属性将 orator 字体应用到了 h1 标题中。
结论
到目前为止，我们已经学会了如何使用 npm 包 orator-npm-webfont。它使得我们可以更快更方便地上手使用 orator 字体，并使我们的项目更具个性化。希望本篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b481e8991b448defd6