当我们在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"。
-
打开 Google Fonts 网站：fonts.google.com
-
在搜索框中输入 "Open Sans"，然后点击 "Select this font"，并选择字体的粗细及字符集
-
点击 "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" 的特定字体。
-
将字体文件放在项目的静态资源目录下，例如
src/assets/fonts -
在
.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 组件中使用。