如何在React JS中设置全局字体族？

Question

我正在尝试像这样为 React 中的所有文本设置一个字体系列:

index.css 文件:

:root {
    font-family: 'Vazir', sans-serif !important;
}

但它并不适用，我必须在每个组件的css文件中应用font-family: 'Vazir', sans-serif !important;。

如何编写一次字体族并使其适用于所有组件文本，或者如何设置一个全局字体族样式，以便在React JS中呈现的所有文本上应用？

- Mehdi Faraji

---

这个回答解决了你的问题吗？有没有一种方法可以在不使用styled-component的情况下为整个React应用程序设置默认字体系列？ - Heretic Monkey

Answer 1

将您的字体族加入到此处应该没问题：

body, html { 
  font-family: 'Vazir', sans-serif;
}

在 React 中进行这项操作时，有几个需要注意的事项:

• 在根组件 <App/> 中是否导入了 CSS 文件?
• 在 webpack 配置中是否使用了 css-loader?
• 在尝试使用之前是否设置了 @font-family?
• 还是你已经从 link="rel" 导入了字体?

- Raf Sz.

Answer 2

如果您想要调整所有页面上的所有文本字体，只需用*替换:root。星号选择器影响页面上的所有元素。

请确保将您的CSS文件导入到想要应用它的每个React页面中。

- StrayAnt

---

没问题。很高兴能帮忙。 - StrayAnt

只有一个想法，不要将index.css文件添加到每个React页面中， 我们应该在index.js文件中导入并添加index.css文件，因为它是React应用程序的起始点，所以它总是会运行。确保index.css与index.js位于同一目录中。 - Alok Ranjan

Answer 3

只是一个想法，不要将 index.css 文件添加到每个 React 页面中， 我们应该在我们的 index.js 文件中导入并添加 index.css 文件，因为它是 React 应用的起始点，所以它总是会运行。

确保 index.css 与 index.js 在同一个目录中。

- Alok Ranjan