适当的方式，包括新的字体和引用它？

Question

在ReactQL文件结构中，是否有存储自定义字体的推荐位置，您将如何引用该字体？

例如，我尝试将字体添加到./静态中，并在styles.global.css中引用它，但没有这样的运气。

有什么建议吗？

Answer 1

您可以通过三种方式引用字体(或图像)：

1.在JS代码中

您可以像导入任何其他代码一样，使用ES6模块语法导入字体/img：

// imports will start looking in your project root
image someFont from 'src/fonts/whatever.ttf'; // someFont = public path to font

在这种情况下，someFont将等于Webpack处理并转储到结果的dist文件夹中的字体文件路径的字符串。这是为您自动完成的；您不需要将字体或图像放在任何特殊的位置。

然后，在通常需要完整文件路径的任何地方，您都可以在React组件中引用这一点；字符串可以从ReactQL web服务器公开访问：

// The regular, pre-processed PNG image
import logoImage from 'src/images/logo.png';

// A component that uses the image
const ShowLogo = () => (
   <img src={logoImage} />
);

在这种情况下，在Webpack处理完logoImage并将常量转储到生成的Javascript包中之后，它可能最终成为/assets/img/logo.d41d8cd98f00b204e980.png。

按照惯例，我建议您将静态资产与调用React组件保存在同一个文件夹中。如果有多个组件指向相同的资产，只需选择一个合理的名称，比如src/fonts/或src/images，甚至是/images。

2.在CSS中

在任何相同的.css|sass|scss|less|或*.global.版本中，您可以使用常规的@import语法导入：

styles.global.css

@font-face {
    font-family: 'Starjout';
    src: url('./Starjout.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
  padding: 0;
  border: 0;
  font-family: 'Starjout';
  font-size: 16px;
}

若要确保正确解析字体，请相对于CSS文件导入。在本例中，Starjout.ttf驻留在与styles.global.css相同的文件夹中。

/static . 3. 内部

您在/static中放置的任何内容都将被放置在生成的dist/public文件夹和-is中。它不会被Webpack处理--这意味着在生产中不会压缩图像，也不会创建.gz或.br版本。它们只会被复制过来。

要引用该文件，您可以在CSS中使用完整的URL。如果使用相对路径，Webpack将期望找到相对于源CSS的文件，它将无法工作。同样，将文件放入/static中意味着文件将以其原始形式复制，因此通过JS导入也不能正常工作。

基本规则是:任何想要考虑“源”的静态文件，放入src/或项目路由中的任何其他地方。任何您想要在不需要处理的情况下复制或能够动态导入的东西，输入/static