如何在React项目中引入字体文件并使用详解

当我们在React项目中使用特定的字体时，我们需要将字体文件引入到项目中，并在代码中引用并应用该字体。以下是一种可能的引入字体并使用字体的方式。

1. 下载字体文件

首先，我们需要从字体库或其他途径下载需要使用的字体文件。常见的字体文件格式为 .ttf、.otf、.eot、.woff 和 .woff2 。将下载的字体文件保存在项目的某个文件夹下，例如 src/assets/fonts

2. 将字体文件放入项目中

将下载好的字体文件放入项目中，最好的位置是放在静态资源目录下，例如 src/assets/fonts。

3. 在CSS文件中声明字体

在我们想要使用字体的 .css 文件中声明字体，例如：

@font-face {
  font-family: 'CustomFont';
  src: url('../assets/fonts/custom-font.ttf'); /* 注意路径 */
}

这将定义一个自定义字体家族名为 CustomFont，并且告诉浏览器从字体文件路径引入这个字体，可以是 .ttf、.otf、.eot、.woff 或 .woff2 格式。

4. 在React组件中使用字体

有两种方法在React中应用这个字体。第一种方法是应用于全局样式，这样在整个应用中都可以使用：

body {
  font-family: 'CustomFont';
}

第二种方法是仅应用于特定组件中：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="app" style={{ fontFamily: 'CustomFont' }}>
      Hello, World!
    </div>
  );
}

export default App;

这将使这个组件和所有 子级 继承该自定义字体。

示例1: 使用Google字体

可以通过CSS @import 或 <link> 标签从Google字体库中引入字体。在这个例子里，我们将从 Google 字体库引入字体 "Open Sans"。

1. 打开 Google Fonts 网站：fonts.google.com

2. 在搜索框中输入 "Open Sans"，然后点击 "Select this font"，并选择字体的粗细及字符集

3. 点击 "Embed" 标签，并将标准CSS或HTML链接复制到项目中的 index.html

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">

此时，字体文件就被自动引入到项目中了，我们可以在全局样式或特定组件中应用此字体：

/* 全局样式 */
body {
  font-family: 'Open Sans', sans-serif;
}

/* 组件样式 */
.my-component {
  font-family: 'Open Sans', sans-serif;
}

示例2: 使用本地字体文件

另一个示例，让我们从本地字体文件引用字体。假设我们已下载了一种名为 "RockoFLF.ttf" 的特定字体。

1. 将字体文件放在项目的静态资源目录下，例如 src/assets/fonts

2. 在 .css 文件中声明字体

@font-face {
  font-family: 'RockoFLF';
  src: url('../assets/fonts/RockoFLF.ttf'); /* 注意路径 */
}

/* 或者，使用多个字重和格式的字体 */
@font-face {
  font-family: 'RockoFLF';
  src: url('../assets/fonts/RockoFLF-regular.ttf') format('truetype'),
       url('../assets/fonts/RockoFLF-bold.ttf') format('truetype'),
       url('../assets/fonts/RockoFLF-italic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 然后，在组件样式中使用字体 */
.my-component {
  font-family: 'RockoFLF', sans-serif;
}

这将使 "RockoFLF" 字体可在 .css 文件和 React 组件中使用。