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 dev工具中，字体文件没有出现在 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
4

9 回答 9

60

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

@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.rbproduction.rb

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

于 2013-08-18T14:06:37.937 回答
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 助手完成的。

于 2014-09-10T09:07:11.643 回答
20

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

就像有内置的图像助手一样，也有内置的字体助手： 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;
}
于 2014-05-13T20:39:36.140 回答
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;
}
于 2015-03-25T19:48:14.807 回答
9

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

于 2014-09-10T14:26:10.360 回答
5

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

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

于 2014-02-04T01:54:12.607 回答
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; }

并且不要忘记重新启动您的服务器。

于 2016-08-31T16:46:49.313 回答
2

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

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

于 2014-12-18T09:53:21.737 回答
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;

}
于 2014-02-26T18:34:31.753 回答