如何在 Spring Boot 提供的 create-react-app 中使用本地字体？答案

【问题标题】：How to use local fonts in a create-react-app that's served by spring boot?如何在 Spring Boot 提供的 create-react-app 中使用本地字体？
【发布时间】：2018-04-18 12:12:45
【问题描述】：

我正在后端开发带有 spring boot 的 webapp，并在前端做出响应（具体而言，我使用 create-react-app）。现在我认为，只要有根级请求进入，甚至是对任何未被我的后端 API 占用的路由的请求，让 spring 为前端应用程序提供服务将是最简单的解决方案。

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

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

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

最令人困惑的事情是，当我在浏览器中搜索网站的源代码并点击指向呈现的 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 Boot 后端应用程序为前端提供服务吗？

感谢您的帮助！

【问题讨论】：

标签： spring reactjs spring-boot create-react-app

【解决方案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 肯定也有类似的东西。

我希望这对你们中的一些人也有帮助。

【讨论】：