如何在Rails 4中使用字体

我有一个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 

Answer 1

你的@font-face声明非常接近，你只是缺lessurl声明中的/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都可以直接在开发和生产的/assetspath下find。 您只需要在application.rb的资产path修改行，在development.rb和production.rb重新执行即可。

另外，所有的字体格式基本上是二进制的。 不需要预编译它们，因此您可以安全地删除assets.precompile另外。

这里是一个新的Rails 4应用程序提供自定义字体。 除了CSS中的font-face导入语句，还增加了一个页面来显示其他内容：

https://github.com/sorentwo/font-example

Answer 2

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

如果你有/ assets / fonts或者vendor / assets / fonts中的字体，Rails 4会find它们！ 为了利用这一点，在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'); } 

请注意，字体文件前面没有文件夹规范。 这是由铁路帮手完成的。

Answer 3

由于位置是dynamic的，请不要硬编码您的字体目录。

就像内置图像助手一样，还有内置的字体助手： 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; } 

Answer 4

这对我的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; } 

Answer 5

创buildapp / assets / fonts目录后重新启动“rails server”

Answer 6

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

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

Answer 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; }

也不要忘了重新启动你的服务器。

Answer 8

有时字体不能从assets/fonts目录中检测到。

如果安全性不是问题，我们可以将fonts目录放到公用文件夹中。 然后他们将在public/一级提供。

Answer 9

忘记在你的application.rb中改变Rails 4中的任何东西。 只需添加/资产/前缀像@Parker Selbert说，以下将工作：

 @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; }