Question

我正在后端使用spring boot开发webapp并在前端做出反应（我使用create-react-app来具体）。现在我认为，只要有根级请求进入，或者甚至是对我的后端API没有占用的任何路由的请求，这都是最简单的解决方案。

要整合本地字体，我在我的前端index.css中声明字体：

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

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

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

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

我做错了什么？这可能是因为我使用spring boot后端应用服务于前端这一事实？

感谢您的帮助！

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（两个{ {1}}文件夹，因为其中一个是Spring的，另一个是React构建结构的一部分。

我希望这也能帮助一些遇到此问题的人。

如何在Spring-boot服务的create-react-app中使用本地字体？

1 个答案: