reactjs中的字体问题

Question

在 React public 文件夹中，我有 style.css 和 index.html。里面style.css我写了

*{
   font-family: 'Roboto', sans-serif
}

这意味着 Roboto 字体应用于所有组件。我从 index.html 中的 google 导入了 Roboto 字体 link。
现在App.js，我有以下路线

<Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/login" component={Login} />
        <Route path="/register" component={Register} />
        <Route path="/profile" component={Profile} />
      </Switch>
    </Router>

现在，对于任何组件，当我将路径名作为正斜杠 / 和路径名（例如 /profile 时，它就会完美地工作，组件被渲染并且 Roboto字体也可以，但是，如果我将路径名作为正斜杠 / 和路径名，例如 /profile，然后再添加用户 ID 或用户名参数，例如 /profile/:username，然后 Roboto 字体不会受到影响，它显示默认字体但是，如果我再次从 /profile/:username 中删除 :username 参数并使其成为 /profile 然后 Roboto 字体再次工作.那么这里有什么问题。为什么在添加 / 和该路由中的任何路径名或参数后字体在该组件中不起作用。

Answer 1

首先，将 css 文件移动到您的 /src 目录（例如 /src/css/styles.css），然后将所有内容都包裹在文件中路由器通过以下方式导入 css 文件：

import "./css/styles.css"

（假设js文件是位于/src目录下的目录，没有任何嵌套）

reactjs中的字体问题

Font issue in reactjs

javascript

css

fonts

reactjs