2

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

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

有什么建议吗？

4

1 回答 1

2

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

1. 从你的 JS 代码中

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

// 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可能会/assets/img/logo.d41d8cd98f00b204e980.png在 Webpack 处理它并将常量转储到生成的 Javascript 包中之后结束。

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

2. 在你的 CSS 中

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

样式.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

于 2017-07-07T20:30:13.950 回答