Question

我在Rails 4.1应用程序中使用了一些自定义字体。它们位于：

app/assets/fonts/MyCustomFont.ttf

我在样式表（SASS）中引用它们：

@font-face
  font-family: "MyCustomFont"
  src: url("MyCustomFont.ttf") format('truetype')

h1
  color: #fff
  font-family: "MyCustomFont"

在开发模式下，它正确呈现我的字体。当我部署到生产环境时，我看到日志中提到的字体：

** Execute assets:precompile
I, [2014-09-12T23:46:40.077333 #12473] INFO -- : Writing /var/www/apps/10121/releases/c655762f076df708896b622c12429c8bf76f21ec/public/assets/MyCustomFont-18108066511bb5b3ddfd0454b738e8d5.ttf

但是，当我在浏览器中加载页面时，它不会呈现自定义字体。 Web检查器控制台显示错误：

无法加载资源：服务器响应状态为404（未找到） http://example.com/assets/MyCustomFont.ttf

当我使用日志中列出的文件名输入字体的URL时：

http://example.com/assets/MyCustomFont-18108066511bb5b3ddfd0454b738e8d5.ttf

然后浏览器触发文件下载。因此，似乎只是在错误的位置引用该文件。

如何解决此问题以及引用字体的正确方法是什么，以便在编译资产时它在生产中工作？

Answer 1

<强>预编译

经典问题 - 它基本上归结为Rails的precompilation进程（它如何指纹文件等），而你没有调用dynamic文件路径（作为结果创建）这个precompilation过程）

您正在调用以下内容：

#app/assets/stylesheets/application.css.sass
@font-face
  font-family: "MyCustomFont"
  src: url("MyCustomFont.ttf") format('truetype')

这将在开发中使用，因为MyCustomFont.ttf将在assets文件夹中可用。但是，当它被推送到生产中（因此附加了指纹并移动到public/assets文件夹）时，您的静态参考无法工作

相反，您最好使用asset_url帮助程序：

#app/assets/stylesheets/application.css.sass
@font-face
  font-family: "MyCustomFont"
  src: asset_url("MyCustomFont.ttf") format('truetype')

这将引用动态文件 - 而不是静态文件 - 这意味着预编译过程应该有效！

Rails资产管道：为什么我的自定义字体在开发中工作而不是生产？

1 个答案: