Question

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

例如，我尝试将字体添加到./static中，并在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} />
);

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

按照惯例，我建议您将静态资源保存在与调用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位于同一文件夹中。

第3。内部/static

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

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

基本规则是：您要考虑“源”的任何静态文件，放在src/或项目路径中的任何其他位置。您想要复制而无需处理或能够动态导入的任何内容，请放入/static

适当的方式包括新的字体和参考吗？

1 个答案: