Rails资产管道

Question

我无法在Rails中使用字体。

我在Rails应用中使用Summernote文本编辑器。我在summernote.css有vendor/assets/stylesheets/summernote.css个文件。这引用了url("font/summernote.eot?ad8d7e2d177d2473aecd9b35d16211fb")等字体网址。

（我不知道最后的id是什么意思？）

所以我在vendor/assets/stylesheets/font中也有字体文件：

vendor/assets/stylesheets/font/summernote.eot
vendor/assets/stylesheets/font/summernote.ttf
vendor/assets/stylesheets/font/summernote.woff

当我在本地开发时，这实际上工作正常。但是，一旦我部署到Heroku，字体就不再出现了。

从浏览开始，看起来我应该将字体放在app/assets/fonts下面。但我无法让它发挥作用。我试过把它们放在：

app/assets/fonts/summernote.woff
app/assets/fonts/font/summernote.woff

但这些不起作用，我仍然在Heroku上找到404找不到的字体文件错误。

我应该在哪里放置字体文件？

FWIW，我还使用位于vendor/assets/stylesheets/bootstrap/bootstrap.min.scss的引导程序SCSS文件，引用src:url(../fonts/glyphicons-halflings-regular.eot?#iefix)，字体位于app/assets/fonts/glyphicons-halflings-regular.eot。这些问题存在相反的问题：它们在Heroku上工作正常，但在本地开发时会出现404错误。

Answer 1

您的研究正在向您发送正确的方向。您可以将文件放在app/assets/fonts文件夹或vendor\assets\fonts文件夹中。要使用它们，您需要将CSS文件重命名为.scss扩展名，然后使用sass-rails帮助程序指向字体。

例如：

src: url(font-path('summernote.eot'));

此处font-path是sass-rails提供的帮助程序。它将扩展到字体文件的正确位置。您在路径末尾看到的那一长串字符是链接为每个文件生成的指纹，以跟踪版本。

您还需要将字体添加到预编译路径。在config/initializers/assets.rb文件中添加以下行：

Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf|otf|woff2)\z/

在http://guides.rubyonrails.org/asset_pipeline.html阅读有关资产管道的所有信息。请阅读 2.3.2 CSS和Sass 部分，了解有关sass-rails帮助者的更多信息。

Answer 2

Rails资产管道

生产中的行为

当您将字体放入资产管道时，Rails会自动在生产模式下为其添加缓存指纹 。

这意味着您的资源不再是.../font/summernote.eot，而是.../font/summernote-abc123def345.eot（其中＆＃34; abc123def345＆＃34;是随机十六进制值）。

如果样式表试图引用没有指纹的字体文件，则无法找到它。它在开发模式下工作，因为指纹不在那里，因此文件名是预期的。

引用指纹资产

为了使用指纹引用CSS 中的字体文件，您需要使用其中一个资产管道的资产助手，例如{{3} }或font-url。

资产助手

例如，尝试更改CSS引用，如此，

// in vendor/assets/stylesheets/summernote.css.scss font-url("font/summernote.eot?ad8d7e2d177d2473aecd9b35d16211fb")

加载路径

确保字体包含在资产加载路径
中
# in config/initializers/assets.rb Rails.application.config.assets.paths << "vendor/assets/stylesheets/font/"

Answer 3

我有类似的问题。对我有用的是：

将夏令营字体复制到app/assets/fonts目录
将以下代码段添加到application.css.scss

@font-face{
font-family:"summernote";
src:url(font-path("summernote.eot"));
src:url(font-path("summernote.eot?#iefix")) format("embedded-opentype"), url(font-path("summernote.woff")) format("woff"), url(font-path("summernote.ttf")) format("truetype");
font-style:normal;
font-weight:normal;}

我认为这可能有助于某人。

Answer 4

我会看一下资产管道上的这个链接，以全面了解它如何与rails配合使用。 http://guides.rubyonrails.org/asset_pipeline.html

这将帮助你找到最好的地方。我的意见是我会把它们放在资产/字体中然后我的生产资料。在该链接中，它低于4.2 rake资产：预编译

相关的堆栈帖子有一个很好的答案，非常简单地解释它 Using fonts with Rails asset pipeline

我在哪里将我的字体放在Rails 4中？

4 个答案:

Rails资产管道

生产中的行为

引用指纹资产

资产助手

加载路径