如何在带有 React 和 Typescript 的样式化组件中使用@font-face？

Question

我正在尝试让字体在 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。但是，我根本无法加载字体。有谁知道如何解决这一问题？如果您需要更多信息，请告诉我，我会提供！

Answer 1

带样式的组件结构和语法看起来不错。

Webfont 文件需要位于 src 之外的 public 文件夹中（因为它们不会像使用图像资源或静态文件那样直接导入到组件中 css 文件为例）。指向字体 url 的 CSS 规则最终将相对于 <style> 标记在 DOM 中插入的位置，而不是相对于您的 React 项目文件夹结构。因此，您可能需要在移动字体后更新 url 值。

此外，除非您真的需要支持旧版浏览器，否则您实际上只需要 woff2 格式。

https://caniuse.com/woff2

如何在带有 React 和 Typescript 的样式化组件中使用@font-face？

How to use @font-face in styled-components with React and Typescript?

css

font-face

typescript

reactjs

styled-components