logo标签列表

如何在Rails 4中使用字体

fontsasset-pipelineruby-on-rails-4
65

我有一个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开发工具的资源下，字体文件未显示在 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
1
只想指出，您不能使用“font”属性使其正常工作。您必须在application.css.less文件中指定： font-family：'HDVPeace';浪费了好20分钟的时间来弄清楚问题所在，希望这可以为某人节省时间和精力 :) - TwoByteHero
这里有一个非常好的如何设置Rails 4和Bourbon字体资产路径的指南：http://github.com/thoughtbot/bourbon/issues/239#issuecomment-26167073（无需编辑application.rb，production.rb或staging.rb中的任何内容）。 - gl03
可能是在Rails资产管道中使用字体的重复问题。 - Besi
如果您想手动处理字体，这里是我为我的Rails应用程序构建的解决方案： https://dev59.com/HmEh5IYBdhLWcg3w1mfs#37650261 - Châu Hồng Lĩnh
我在https://dev59.com/LGIk5IYBdhLWcg3wTccr#40898227上编写了一种通用的方法来诊断和解决这个问题。 - sites
8个回答
60

您的@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的添加。

9
我刚刚审核了一个我在Rails 4上使用自定义字体的应用程序。看起来添加'fonts'到路径中甚至不是必要的。移除路径添加，重新启动，它应该可以正常工作。 - Parker Selbert
2
尝试了重启服务器，但没有改变。在Chrome的开发工具中，在Sources下（显示服务器推送到客户端的所有资源），我没有看到字体文件或字体文件夹。此外，控制台仍然返回“404资源未找到”的错误...某种方式，资产管道没有捕捉到这些文件... - SnareChops
8
font-url еә”иҜҘдјҡиҮӘеҠЁж·»еҠ  /assets еүҚзјҖпјҢжүҖд»ҘдёҚйңҖиҰҒжҢҮе®ҡе®ғгҖӮ - Matijs van Zuijlen
5
我认为问题在于Rails4不再在asset pipeline中放置没有摘要的字体版本。因此，你不能相信/assets/HDV_Peace.eot存在（它在Rails3中存在，现在只有/assets/HDV_Peace-yourdigesthere.eot存在）。更多详情请参见https://dev59.com/EmMm5IYBdhLWcg3wivf7。 - Eric Caron
6
我发现一个新的Rails 4应用程序只需要在scss文件中添加font-url('fontfile.eot?');就可以了。不过，在创建app/assets下的字体目录后，需要重启服务器才能使其生效。 - Space
显示剩余11条评论
52
在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助手完成的。
1
注意！对于过去的内容，不要包括 assets/fonts/；假设那是根目录！因此，如果您在 assets/fonts/roboto/robot.eot 中有某些内容，则应为 font-url('roboto/roboto.eot')。 - TJ Biddle
11

иҝҷеҜ№жҲ‘еңЁдёҖдёӘRails 4.1еә”з”Ёдёӯиө·дҪңз”ЁгҖӮ

  1. е°Ҷеӯ—дҪ“ж·»еҠ еҲ°`app/assets/fonts`дёӢ
  2. еңЁ`.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;
}
1
这对我很有帮助，谢谢。关键部分是像你一样连续使用url和font-path：url(font-path('font-asset-path'))。 - dimitarvp
9
在创建app/assets/fonts目录后，请重新启动“rails server”。
5
3
如果在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; } 同时不要忘记重启您的服务器。
2
有时字体无法从assets/fonts目录中检测到。
如果安全不是问题，我们可以将fonts目录放入公共文件夹中。这样它们就可以在public/级别下使用了。
1
忘记在你的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/assets文件夹下的images、javascripts和stylesheets目录，但这些子目录并不特殊 - 任何assets/*下的路径都将被搜索。” http://guides.rubyonrails.org/asset_pipeline.html#asset-organization - aenw
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接