如何在 Rails 4 中使用字体

Posted 2023-02-15

【中文标题】如何在 Rails 4 中使用字体

【英文标题】：How to use fonts in Rails 4

【发布时间】：2013-08-20 02:09:33

【问题描述】：

我有一个 Rails 4 应用程序，我正在尝试使用自定义字体。

我已经关注了很多关于这方面的教程，但不知何故它不适用于我的应用程序。

我正在使用application.css.less 并声明如下：

@font-face 
    font-family: 'HDVPeace';
    src: font-url('HDV_Peace.eot');
    src: font-url('HDV_Peace.eot?iefix') format('eot'),
        font-url('HDV_Peace.woff') format('woff'),
        font-url('HDV_Peace.ttf') format('truetype'),
        font-url('HDV_Peace.svg#webfont') format('svg');

注意：我也尝试过使用 url() 而不是 font-url() 。前者在控制台上生成 404 错误，而后者似乎根本没有做任何事情。在资源下的chrome dev tools中，字体文件没有出现在 assets 文件夹下，或者任何地方

在我的config/application.rb 我有：

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

我的config/environments/development.rb 和config/environments/production.rb 都有：

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf)

我的字体文件位于app/assets/fonts 并且不包含在该文件夹下...

我错过了什么？

更新：

文件夹结构

app
└── assets
    └── fonts
        ├── HDV_Peace.eot
        ├── HDV_Peace.svg
        ├── HDV_Peace.ttf
        └── HDV_Peace.woff

【问题讨论】：

只是想注意，您不能使用“字体”属性来使其工作。您必须在 application.css.less 文件中指定：font-family: 'HDVPeace';。浪费了 20 分钟试图找出问题所在，所以希望这可以节省一些人的时间和精力:)

这里是使用 Rails 4 和 Bourbon 设置字体资产路径的绝佳方法：github.com/thoughtbot/bourbon/issues/239#issuecomment-26167073（无需编辑 application.rb、production.rb 或 staging.rb 中的任何内容.)

Using fonts with Rails asset pipeline的可能重复

如果你想手动处理字体，这是我为我的 Rails 应用程序构建的解决方案：***.com/a/37650261/3802981

我在***.com/a/40898227/1197775写了一个通用的方法来诊断和解决这个问题。

【参考方案1】：

您的 @font-face 声明非常接近，您只是缺少 url 声明中的 /assets 前缀。

@font-face 
    font-family: 'HDVPeace';
    src: url('/assets/HDV_Peace.eot');
    src: url('/assets/HDV_Peace.eot?iefix') format('eot'),
         url('/assets/HDV_Peace.woff') format('woff'),
         url('/assets/HDV_Peace.ttf') format('truetype'),
         url('/assets/HDV_Peace.svg#webfont') format('svg');

添加到assets.paths 的任何内容都可以在开发和生产中直接在/assets 路径下使用。您只需要在application.rb 中修改资产路径行，在development.rb 和production.rb 中再次进行修改只是多余的。

此外，所有字体格式本质上都是二进制的。无需预编译它们，因此您可以安全地删除 assets.precompile 添加。

【讨论】：

我刚刚查看了我在 Rails 4 上使用自定义字体设置的应用程序之一。看起来甚至不需要将 fonts 添加到路径中。删除paths添加，重启，应该可以正常工作了。

尝试并重新启动服务器。不用找了。在源下的 Chrome 开发工具中（它显示了服务器推送到客户端的所有资产）我看不到字体文件或字体文件夹。此外，控制台仍然返回 404 resource not found 错误...不知何故资产管道没有拾取文件...

font-url 应该是自己加上/assets 前缀，所以应该不需要指定。

我认为问题在于 Rails4 不再将字体版本（没有摘要）放入资产管道中。因此，您不能相信 /assets/HDV_Peace.eot 存在（它在 Rails3 中存在，现在只有 /assets/HDV_Peace-yourdigesthere.eot 存在。）有关更多详细信息，请参阅***.com/questions/17536023/…

我发现只需要一个新的 Rails 4 应用程序：scss 文件中的font-url('fontfile.eot?');。在应用程序/资产下创建字体方向后需要重新启动服务器才能工作。

【参考方案2】：

在 Rails 4 中，有一个帮助器来设置字体的路径。

如果您在 /assets/fonts 或 vendor/assets/fonts 中有字体，Rails 4 会找到它们！为了利用这一点，在 Bootstrap CSS 文件中将 @font_face 调用更改为

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

请注意，字体文件前面没有文件夹说明。这是由 rails 助手完成的。

【讨论】：

注意！对于过去，不包括assets/fonts/；假设这是根！因此，如果您在 assets/fonts/roboto/robot.eot 中有内容，那么它将是 font-url('roboto/roboto.eot')

【参考方案3】：

请不要对您的字体目录进行硬编码，因为该位置是动态的。

就像有内置的图像助手一样，也有内置的字体助手：http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-font_url

例子：

@font-face 
    font-family: 'QuicksandOTF';
    src: font_url('Quicksand-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

【讨论】：

font-url 和其他解决方案对我不起作用，但是 font_url（带下划线）确实很好用。

font_url 是唯一真正适用于我的 Rails 5 应用的东西

将 style.css.erb 重命名为 style.css.scss.erb 后，font_url 和 font-url 都对我有用。请记住这一点。

【参考方案4】：

这在 Rails 4.1 应用程序上对我有用。

在 `app/assets/fonts` 下添加字体 从 `.css.scss` 文件中调用它们，如下所示：

@font-face 
  font-family: 'icomoon';
  src: url(font-path('icomoon.eot') + "?#iefix") format('embedded-opentype'),
    url(font-path('icomoon.woff')) format('woff'),
    url(font-path('icomoon.ttf'))  format('truetype'),
    url(font-path('icomoon.svg') + "#icomoon") format('svg');

[class^="icon-"], [class*=" icon-"] 
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

【讨论】：

这对我有帮助，谢谢。关键部分是像你一样一个接一个地使用 url 和 font-path：url(font-path('font-asset-path'))

【参考方案5】：

创建 app/assets/fonts 目录后重启“rails server”

【参考方案6】：

我发现这篇文章可以解决我的所有问题。

http://aokolish.me/blog/2011/12/24/at-font-face-with-the-asset-pipeline/

【参考方案7】：

如果你们在 Rails 5 中使用字体有问题，只需编辑 app/assets/config/manifest.js

然后插入这个//= link_tree ../fonts

使用方法：

@font-face font-family: 'FontAwesome'; src: url('fontawesome-webfont.eot?v=4.6.3'); src: url('fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('fontawesome-webfont.woff?v=4.6.3') format('woff'), url('fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal;

别忘了重启你的服务器。

【参考方案8】：

有时无法从assets/fonts 目录中检测到字体。

如果安全不是问题，我们可以将fonts 目录放入公共文件夹。然后，它们将在 public/ 级别可用。

【参考方案9】：

忘记在 application.rb 中更改 Rails 4 中的任何内容。只需像@Parker Selbert 所说的那样添加 /assets/ 前缀，以下将起作用：

@font-face 
  font-family: 'custom-font-name';
  src: font-url('/assets/_folder_/fontX-webfont.eot');
  src: font-url('/assets/_folder_/fontX-webfont.eot?#iefix') format('embedded-opentype'),
       font-url('/assets/_folder_/fontX-webfont.woff') format('woff'),
       font-url('/assets/_folder_/fontX-webfont.ttf') format('truetype'),
       font-url('/assets/_folder_/fontX-webfont.svg#sociconregular') format('svg');
  font-weight: normal;
  font-style: normal;

【讨论】：

/assets 下的任何目录都将使用 font-url 辅助方法（以及任何辅助方法）进行搜索，因此不需要放置 '/assets/_folder_'。 Rails 指南这样说：“ 2.2.1 搜索路径 当从清单或帮助程序中引用文件时，Sprockets 会搜索三个默认资产位置。默认位置是：app/ 下的图像、javascripts 和样式表目录assets 文件夹，但这些子目录并不特殊 - 将搜索 assets/* 下的任何路径" guides.rubyonrails.org/asset_pipeline.html#asset-organization