404 Missing Font 即使字体存在且字体路径正确答案

【问题标题】：404 Missing Font even though Font present and path to Font is correct404 Missing Font 即使字体存在且字体路径正确
【发布时间】：2016-10-31 02:41:09
【问题描述】：

我正在使用 Rails 4 和资产管道。我也在使用 Bootstrap 3。在 app/assets/stylesheets/material_admin_theme 中，我有一个文件 bootstrap.css。它包含对源文件的@font-face 声明：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../../fonts/glyphicons-halflings-regular.eot');
  src: url('../../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

路径向上移动两个目录 ../../ 到字体目录。所以上面的两个目录是 stylesheets/assets，然后是一个子目录，名为 fonts 并带有指定的字体：

app/assets/fonts/glyphicons-halflings-regular.ttf

所以源 url 确实正确地导致了字体。但是，当我加载页面时，我注意到 Chrome 控制台显示 404：

GET http://localhost:3000/fonts/glyphicons-halflings-regular.ttf 404 (Not Found)

为什么当字体存在且源 URL 是正确路径时，我会收到此 404 Not Found 消息（因此该图标不会出现在页面上）？

【问题讨论】：

标签： css ruby-on-rails twitter-bootstrap asset-pipeline

【解决方案1】：

好的，困惑在于资产管道。 assets 文件夹中的目录树在任何环境、开发、生产等中加载页面时都不适用。它正在查看 public/assets 文件夹。在该目录中，图标只是转储到资产目录中。因此，当我将路径更改为：

src: url('/assets/glyphicons-halflings-regular.eot');

成功了。同样，当您预编译资产时，它不会公开生成字体目录。它只是将 /assets 根目录中的字体连同编译的样式表和 javascript 一起转储。

【讨论】：