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

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

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

有什么建议吗？

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

1。从您的JS代码中

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

//导入将开始在项目根目录中查找
来自“src/fonts/whatever.ttf”的图像someFont；//someFont=字体的公共路径

在这种情况下，

someFont

将等于由Webpack处理的字体文件路径字符串，并转储到生成的

dist

文件夹中。这是自动为您完成的；你不需要把字体或图像放在任何特别的地方

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

//常规的预处理PNG图像
从'src/images/logo.png'导入logoImage；
//使用图像的组件
const ShowLogo=（）=>(
);

在这种情况下，

logoImage

可能会在Webpack对其进行处理并将常量转储到生成的Javascript包中后，变成

/assets/img/logo.d41d8cd98f00b204e980.png

按照惯例，我建议您将静态资产与调用React组件保持在同一文件夹中。如果有多个组件指向同一资产，只需选择一个合理的名称，如

src/font/

或

src/images

，甚至只选择

/images

2。从您的CSS内部

在任何

.css | sass | scss | less |

或

*.global.

版本中，可以使用常规的

@import

语法导入：

style.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