reactjs - 为什么我的本地字体没有应用于 Emotion 全局样式？

Question

我正在尝试在利用 Emotion 的 React 项目中使用本地托管字体及其 Global component .此方法适用于网络字体，例如 Google Fonts ，但是当我下载相同的字体并尝试将其应用为本地时 .ttf文件使用 @font-face ，我无法达到相同的结果。

这是重要的文件， App.js :

import React from "react";

import { Global, css } from "@emotion/core";
import styled from "@emotion/styled";

const GlobalStyles = css`
  @import url("https://fonts.googleapis.com/css?family=Dancing+Script&display=swap");

  @font-face {
    font-family: "Local Font";
    src: url("fonts/DancingScript-Regular.ttf");
  }

  * {
    text-align: center;
  }
`;

const FromGoogle = styled.h1`
  font-family: "Dancing Script";
`;

const FromLocal = styled.h1`
  font-family: "Local Font";
`;

function App() {
  return (
    <div className="App">
      <Global styles={GlobalStyles} />
      <FromGoogle>This text's font family is from Google.</FromGoogle>
      <FromLocal>
        This text's font family should be the same, except it comes from a local
        font file, and it's not working.
      </FromLocal>
    </div>
  );
}

export default App;

出于某种原因， FromGoogle 中的文本使用 Google 字体很好，而文本来自 FromLocal没有。我的第一个想法是这是路径的问题，但如果是，我无法判断。

这是 full project on GitHub .我使用了 Create React App，并删除了所有不相关的样板。

Answer 1

在我的 Next.js 应用程序中，我在这些版本中使用了情感:

"@emotion/react": "^11.1.1",
"@emotion/styled": "^11.0.0",

我的全局风格是:

export const GlobalStyles = () => (
    <Global
        styles={css`
            @font-face {
                font-family: 'Faustina';
                font-style: normal;
                font-weight: 700;
                src: local(''), 
                    url('/fonts/Faustina/Faustina.woff') format('woff'),
                    url('/fonts/Faustina/Faustina.ttf') format('truetype');
            }

            * {
                box-sizing: border-box;
                font-family: Faustina;
            }

            html,
            body {
                width: 100%;
                height: 100%;
                min-height: 100%;
                padding: 0;
                margin: 0;
            }
        `}
    />
);

我的字体在

project_root/public/fonts/Faustina

// explicitly
project_root/public/fonts/Faustina/Faustina-Bold.ttf
project_root/public/fonts/Faustina/Faustina-Bold.woff

为了查看字体更改，我需要重新启动开发服务器，例如 yarn dev .在重新启动之前，我遇到了同样的问题，即未显示字体(甚至在开发工具网络选项卡中下载)。