我正在尝试使用 React 和 TypeScript 使字体在 styled-components 中工作。

GlobalStyle.ts 如下所示：

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
   @font-face {
     font-family: 'Roboto';
     font-style: normal;
     font-weight: 300;
     src: url('./fonts/roboto-v27-latin-300.eot'); /* IE9 Compat Modes */
     src: local(''),url('./fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
          url('./fonts/roboto-v27-latin-300.woff2') format('woff2'),/* Super Modern Browsers */
          url('./fonts/roboto-v27-latin-300.woff') format('woff'),/* Modern Browsers */
          url('./fonts/roboto-v27-latin-300.ttf') format('truetype'),/* Safari,Android,iOS */
          url('./fonts/roboto-v27-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
   }

   *{
        color: red;
        font-family: "Roboto";
   }
   `;

export default GlobalStyle;

My index.tsx 看起来像这样：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import GlobalStyle from "./GlobalStyle";

ReactDOM.render(
    <React.StrictMode>
        <GlobalStyle />
        <App />
    </React.StrictMode>,document.getElementById("root")
);

我从这两个文件中删除了一些在此上下文中不必要的行。 这两个文件在目录中处于同一级别。 字体文件全部下载在一个名为“fonts”的文件夹中

“正常”样式的工作方式类似于“颜色：红色；”在GlobalStyles.ts。 但是，我根本无法加载字体。有谁知道如何解决这一问题？如果您需要更多信息，请告诉我，我会提供！