React 中的字体

Rana Hasnain Khan 2022年5月18日

React React Fonts

我们将介绍如何在 react 中安装字体和使用字体。

React 中的字体

字体是网站最重要的部分。在 React 应用程序中安装字体有不同的方法。

最常见的方法是导入字体。我们可以在命令提示符下使用 npm 或 yarn 导入字体。让我们以安装 Quicksand 为例。

# react CLI
yarn add typeface-quicksand

或者

# react
npm install typeface-quicksand --save

安装后，我们需要将它导入到 index.tsx 文件中。

# react
import 'typeface-quicksand';

现在，我们可以在 style.css 文件中使用它。

# react
h1,
p {
  font-family: Quicksand;
}

输出：

使用 npm 和 yarn 导入字体

在 react 中安装字体的另一种方法是直接在 index.html 或 style.css 文件中添加链接。让我们以安装 Lato 字体为例。

# react
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

或者，

# react
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
</style>

让我们导入 Lato 字体并更改标题和段落的样式。

# react
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
h1,
p {
  font-family: Lato;
}

输出：

使用链接导入字体

在 react 中安装字体的另一种方法是下载并添加到我们的源代码中。

我们可以轻松地从 fonts.google.com 下载字体并将它们移动到 src 目录中的 fonts 目录。

现在，在 style.css 中，使用 @font-face 添加字体。

# react
@font-face {
  font-family: 'Lato';
  src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}

对于 ttf 格式，我们必须提到 format('truetype')，对于 woff 格式，我们必须提到 format('woff')。

现在，我们可以轻松地使用这种字体进行样式设置。

# react
h1,
p {
  font-family: Lato;
}

输出：

使用链接导入字体

另一种方法是使用 web-font-loader 包。我们可以使用 npm 或 yarn 轻松安装 web-font-loader 包。

# react
yarn add webfontloader

或者，

# react
npm install webfontloader --save

现在，在 index.tsx 中，我们可以导入并指定我们需要的字体。

# react
import WebFont from 'webfontloader';

WebFont.load({
   google: {
     families: ['Lato:300,400,700', 'sans-serif']
   }
});

所以现在，我们学习了四种在 React 中安装和使用字体的不同方法。

Author: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.