向 React 应用添加字体的 3 种快捷方法

✨ 使用字体链接

✨ 使用 Web 字体加载器

✨ 使用`@font-face`

在我们结束之前...

您可能喜欢我的其他文章

在 HTML 中，font用于指定文本的字体、字体大小和排版。您可以通过多种方式将字体添加到 React 应用程序中。本文旨在介绍三种快速添加字体到 React 应用程序中的方法。

本文所有示例均采用create-react-app提供的 React 代码结构。您也可以选择在任何其他代码结构中使用这些示例。

✨ 使用字体链接

<link>我们可以使用HTML 文件中的标签链接到任何在线托管的字体。让我们来举一个Google Fonts使用<link>标签的示例。

转到 [ https://fonts.google.com/]\ (转到https://fonts.google.com/ )。
单击您选择的字体，

点击+Select this style按钮

转到该部分，然后复制该部分Use on the web下的代码<link>

前往index.html你的项目文件。如果你的应用基于create-react-app，你可以在文件夹下找到它public。将复制的行粘贴到该<head>部分中。以下是示例：

 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Hanalei+Fill&display=swap" rel="stylesheet">

转到您的 CSS 文件并添加如下样式，

.font-link {
   font-family: 'Hanalei Fill', cursive;
 }

这里我们使用与上一步链接的相同的字体系列。

最后，您可以在 React 组件中的任何位置添加此样式。

const FontLink = () => {
   return(
       <div className="card">
           <span className="font-link">
               This is with Font Link. We are linking the fonts from the Google Fonts.
           </span>
       </div>
   )
};

export default FontLink;

<span>请注意，我们在 React 组件中使用带有元素的类名。

该组件可能如下所示，

✨ 使用 Web 字体加载器

Web Font Loader可帮助您加载来自Google Fonts、Typekit、Fonts.com和Fontdeck 的字体，以及自托管的 Web 字体。它由 Google 和 Typekit 共同开发。

让我们看看如何从 Google Fonts 加载多种字体并在 React 组件中使用它们。

安装webfontloader

yarn add webfontloader # Or, npm i webfontloader

导入webloader到您的组件

import WebFont from 'webfontloader';

使用字体名称加载所需的字体。最好使用useEffect钩子，并在组件加载时运行一次。由于字体在应用中只需加载一次，因此您可以在index.js文件中加载它们。

 useEffect(() => {
   WebFont.load({
     google: {
       families: ['Droid Sans', 'Chilanka']
     }
   });
  }, []);

这里我们正在加载字体“Droid Sans”和“Chilanka”。

现在，你可以在 React 组件中使用className或style属性来使用这些字体。要使用该className属性，请在 .css 文件中创建一个 CSS 类，

.font-loader {
   font-family: 'Chilanka';
}

然后，在组件的render()方法中，

 <div className="font-loader">
     This is with Web Font Loader using the class attribute. 
     We are loading the <u><b>Chilanka</b></u> font from the Google Fonts.
 </div>

有了style属性，

 <div style={{fontFamily: 'Droid Sans'}}>
    This is with Web Font Loader using the style attribute. 
    We are loading the <u><b>Droid Sans</b></u> fonts from the Google Fonts.
 </div>

该组件可能如下所示，

Web Font Loader 从这里阅读更多相关信息。

✨ 使用`@font-face`

在某些情况下，您可能无法连接到在线字体库并链接/加载它。一个典型的例子是，您的应用用户使用的intranet互联网访问权限受到限制。在这种情况下，字体必须下载到本地并打包到应用中。

@font-face是一个 CSS 规则，通过使用 URL 指向字体来定义字体名称。

fonts在下创建一个名为的文件夹src。
将所需字体下载到src\fonts文件夹中。在本例中，我们下载了两种字体，Goldman和Lobster。

接下来，将字体导入index.js文件。

 import './fonts/Goldman/Goldman-Bold.ttf';

在index.css文件中添加，

@font-face {
 font-family: "GoldmanBold";
 src: local("GoldmanBold"),
  url("./fonts/Goldman/Goldman-Bold.ttf") format("truetype");
 font-weight: bold;
}

现在在使用此家族名称的文件中添加一个类名App.css。

.font-face-gm {
  font-family: "GoldmanBold";
}

在你的 React 组件中使用这个类名，

const FontFace = () => {
   return(
       <div className="card">
           <div className="font-face-gm">
               This is using Font Face. 
               We are linking the <u><b>Goldman</b></u> font from the Google Fonts.
           </div>
       </div>
   )
}
export default FontFace;