包含新字体并引用它的正确方法？答案

【问题标题】：Proper way to include new font and reference it?包含新字体并引用它的正确方法？
【发布时间】：2017-12-12 01:12:11
【问题描述】：

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

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

有什么建议吗？

【问题讨论】：

标签： reactjs webpack reactql

【解决方案1】：

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

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 在 Webpack 对其进行处理并将常量转储到生成的 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 位于同一文件夹中。

3.里面/static

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

要引用该文件，您可以在 CSS 中使用完整的 URL。如果你使用相对路径，Webpack 会期望找到相对于源 CSS 的文件，但它不会工作。同样的，把东西放在/static 中意味着文件会以原来的形式被复制过来，所以通过 JS 导入也不会正常工作。

基本规则是：任何您想考虑为“源”的静态文件，放入src/ 或项目路径中的任何其他位置。任何你想复制而不处理或能够动态导入的东西，输入/static

【讨论】：