如何在 spring 引导服务的 create-react-app 中使用本地字体？

Question

我正在开发 webapp，spring 在后端启动并在前端做出反应（我使用 create-react-app 来具体说明）。现在我认为最简单的解决方案是让 spring 为前端应用程序提供服务，无论何时出现根级请求，甚至请求任何未被我的后端 API 占用的路由。

为了集成本地字体，我在前端的 index.css 中声明了字体：

@font-face {
    font-family: 'TheFont';
    src: local('TheFont'), url(./fonts/TheFont/TheFont.ttf) format('truetype');
}

字体文件（在我的项目中）位于 src/fonts。运行它在开发服务器 (npm start) 上一切正常。但是当我构建应用程序并将其复制到我的 spring 启动后端中的 resources/static/ 时，字体不会显示，而其他一切都按预期工作。

最令人困惑的是，当我在浏览器中搜索网站的源代码并按照 link 到呈现的 css 然后 url 到字体文件（看起来像 ../../static/media/TheFont.9f30b69a.ttf）并直接通过 localhost:8080/static/media/TheFont.9f30b69a.ttf 请求该文件，我得到了字体文件！
渲染出来的css文件的路径是static/css/main.767343db.css，所以字体的相对路径应该是可以的。

顺便说一句，我在 React 应用程序的 package.json 中设置了 "homepage" : "." 以获取相对于 index.html 文件的资产路径（正如我阅读的许多帖子和示例中所推荐的那样）。

我做错了什么？这可能是由于我使用 spring 启动后端应用程序为前端服务造成的吗？

感谢您的帮助！

Answer 1

这个问题现在比较老了，当时没有人回答。它有 440 次浏览，看来很多人都遇到了类似的问题。我在过去解决了这个问题，并想让你知道如何做，所以滞留在这里的每个人都有一些见识：

1) index.css
我一直按照问题中的描述使用 index.css，因此字体定义和字体文件路径如下所示：

@font-face {
    font-family: 'TheFont';
    src: local('TheFont'), url(./fonts/TheFont/TheFont.ttf) format('truetype');
}

2) package.json
然后，在 package.json 中，我根本没有使用 homepage 属性。开发服务器无论如何都会忽略它，后来，当我需要为我的应用程序在生产中使用不同的路径时，我将 homepage 属性设置为 /mypath/ 而没有玩 .获取相对路径或其他东西，它只是没有它。

3)Spring静态资源
我刚刚将我的 React 应用程序的构建复制到我的 Spring 项目的 src/main/resources/static，所以 index.html 的路径是 src/main/resources/static/index.html 并且字体最终在 src/main/resources/static/static/media/TheFont.ttf（两个 static 文件夹，因为一个来自 Spring，另一个是客户端构建结构的一部分）。

顺便说一下，步骤 3) 可以很好地通过 Maven 复制资源插件自动执行 - Gradle 当然也有类似的东西。

我希望这也能帮助一些面临这个问题的人。

如何在 spring 引导服务的 create-react-app 中使用本地字体？

How to use local fonts in a create-react-app that's served by spring boot?

spring

reactjs

spring-boot

create-react-app