React没有正确显示我的字体

Question

我正在将 REACTJS 与样式化组件一起使用，并且需要将自定义字体加载到我的项目中。

路径位置为： src / assets / fonts

我的全局样式的位置是： src / styles / global.js

源代码出现在一个简单的HTML测试中，但没有出现在我的reacjs项目中！

发生了什么事？

Global.js

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
@font-face {
    font-family: 'Circular Sp UI v3 T';
    font-weight: 300;
    font-style: normal;
    src: url('../assets/fonts/CircularSpUIv3T-Light.eot');
    src: url('../assets/fonts/CircularSpUIv3T-Light.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/CircularSpUIv3T-Light.woff2') format('woff2'),
        url('../assets/fonts/CircularSpUIv3T-Light.woff') format('woff');
}

    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    body {
        font-family: 'Circular Sp UI v3 T';
        text-rendering: optimizeLegibility !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: antialiased !important;
    }

    img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
`;

export default GlobalStyle;

实际测试：

以简单的HTML进行测试：

Answer 1

我认为问题出在字体文件的路径上

../assets/fonts/CircularSpUIv3T-Light.eot

这将在其中找到字体

src/styles/assets/fonts/...

因此您的字体文件路径应为

../../assets/fonts/CircularSpUIv3T-Light.eot