在 React 中设置全局 font family
要在 React 中设置全局字体系列，需要在 index.css 文件中的 html 元素上设置 font-family 样式，然后将文件导入 index.js 文件中。 应该在 index.js 中导入全局 CSS，以确保它已加载到您的 React 应用程序的所有页面上。
这是在 index.css 文件中设置 font-family CSS 属性的示例。
body,
html {
font-family: Roboto, Helvetica, sans-serif;
/* 👇️ 或使用操作系统默认字体 👇️ */
/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif; */
}
下面是我们如何在 index.js 文件中导入 index.css 文件。
// 👇️ import css
import './index.css';
import {createRoot} from 'react-dom/client';
import App from './App';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
<App />
);
上面的示例假定我们的 index.css 文件与 index.js 文件位于同一目录中。
在
React中导入全局 CSS 文件时，最好将 CSS 文件导入 index.js 文件。
index.js 文件是你的 React 应用程序的入口点，所以它总是会被运行。
另一方面，如果我们将 CSS 文件导入组件，则在卸载组件后，CSS 样式可能会被删除。
如果我们已经下载了字体并需要从本地文件加载它，请直接在我们的 src 文件夹中创建一个字体并将我们的字体移动到那里。
现在我们可以将它们导入我们的 index.css 文件。
以下示例假定我们已将 Poppins 字体下载到 src/fonts 目录中。
body,
html {
font-family: 'Poppins', sans-serif;
}
@font-face {
font-family: 'Poppins';
src: local('Poppins'), url(./fonts/Poppins-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-weight: 900;
src: local('Poppins'), url(./fonts/Poppins-Bold.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-weight: 900;
src: local('Poppins'), url(./fonts/Poppins-Black.ttf) format('truetype');
}
对于 .ttf 格式，我们将 truetype 传递给 format() 函数。
对于 .woff 格式，我们将 woff 传递给 format() 函数。
对于 .otf 格式，我们将 opentype 传递给 format() 函数。
我们可以通过从谷歌字体中选择一种字体并单击“全部下载”按钮来下载字体。
如果我们要根据外部样式设置全局字体系列，例如 来自google fonts CDN，请确保将样式加载到 public/index.html 文件中。
例如，使用 google 字体，我们可以单击所选字体，然后单击“Select this style”，我们将获得一个链接，我们可以将其添加到 index.html 文件的 head 标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 👇️ loading font-family from google fonts -->
<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=Square+Peg&display=swap"
rel="stylesheet"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
将链接标签复制到 public/ 目录下 index.html 文件的 head 部分后，我们仍然需要在 index.css 文件中设置 font-family 属性
body, html {
font-family: 'Square Peg', cursive;
}
font-family 属性的值取决于我们选择的特定字体。 我们应该能够在获得链接标签的下方找到它。
相关文章
Node.js 与 React JS 的比较
发布时间：2023/03/27 浏览次数：137 分类：Node.js
-
本文比较和对比了两种编程语言，Node.js 和 React。React 和 Node.js 都是开源 JavaScript 库的示例。 这些库用于构建用户界面和服务器端应用程序。
在 TypeScript 中 React UseState 钩子类型
发布时间：2023/03/19 浏览次数：200 分类：TypeScript
-
本教程演示了如何在 TypeScript 中使用 React useState hook。
TypeScript 中的 React 事件类型
发布时间：2023/03/19 浏览次数：162 分类：TypeScript
-
本教程演示了如何在 TypeScript 中为 React 事件添加类型支持。
在 React 中循环遍历对象数组
发布时间：2023/03/18 浏览次数：124 分类：React
-
在 React 中循环对象数组： 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组，其中包含传入函数的结果。 export default function App (
获取 React 中元素的类名
发布时间：2023/03/18 浏览次数：162 分类：React
-
在 React 中使用 event.target 获取元素的类名 获取元素的类名： 将元素上的 onClick 属性设置为事件处理函数。 访问元素的类名作为 event.currentTarget.className 。 export default function App () { cons
如何将 key 属性添加到 React 片段
发布时间：2023/03/18 浏览次数：152 分类：React
-
使用更详细的片段语法将 key 属性添加到 React 片段，例如 React.Fragment key={key} 。 更冗长的语法实现了相同的结果对元素列表进行分组，而不向 DOM 添加额外的节点。 import React from react
如何在 React 中删除事件监听器
发布时间：2023/03/15 浏览次数：203 分类：React
-
在 React 中删除事件监听器： 在 useEffect 挂钩中添加事件侦听器。 从 useEffect 挂钩返回一个函数。 当组件卸载时，使用 removeEventListener 方法移除事件监听器。 import {useRef, useEffect} from r
React 中在 map() 中使用条件跳出map
发布时间：2023/03/15 浏览次数：198 分类：React
-
React 中在 map() 中使用条件： 在数组上调用 map() 方法。 使用 if 条件，如果条件满足则显式返回。 否则返回不同的值或返回 null 以不呈现任何内容。 export default function App () { const arr =
在 React 中调用多个 onClick 函数
发布时间：2023/03/15 浏览次数：160 分类：React
-
在 React 中调用多个 onClick 函数： 在元素上设置 onClick 属性。 在事件处理函数中调用其他函数。 事件处理函数可以根据需要调用尽可能多的其他函数。 export default function App () { const s
