我正在使用React，React-Router和Webpack（带有webpack-dev-server），并且在嵌套路由上加载自定义字体时遇到了麻烦。
在诸如之类的浅路径上/user，一切都可以正常工作/group，但是当我有诸如的嵌套路径时/group/user，不会加载自定义字体（404错误）。
Webpack构建将所有字体按预期放置在根级别（文件名如7f690e503a254e0b8349aec0177e07aa.ttf），并且在显示如的路由时/user，将正确加载字体。
但是，当使用类似的嵌套路由时/group/user，浏览器将尝试/group/7f690e503a254e0b8349aec0177e07aa.ttf从不存在的URL中加载字体。
我认为该字体被假定为相对路径，但我不知道在哪里。
如何使字体路径是绝对路径而不是相对路径？还是有另一种方法可以解决此问题？
不确定是否重要，但是我定义了字体，如下所示styles.less：
// Main font(s)
@font-face {
font-family: 'Lato-Regular';
src: url('../fonts/Lato-Regular.ttf') format('truetype');
}
在这种情况下，一种可能的解决方案是将基本元素添加到您的页面。基本元素使您可以为整个URL的相对URL地址指定一个基本URL。例如设置：
<base href="http://www.youdomain.com/">
那么您就会知道所有相对路径都应相对于域的根目录。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句