Fonts 如何在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

文件夹下或任何地方

在my

config/application.rb

中，我有：

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

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

---

您的

@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.path

的任何内容都可以直接在

/assets

路径下使用。您只需要

application.rb

中的资产路径修改行，在

development.rb

和

production.rb

中再次执行该操作是多余的

---

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

资产。预编译

添加。

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

---

忘记在您的应用程序.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;

}

---

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

就像有图像的内置帮助器一样，也有字体的内置帮助器：

例如：

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

---

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

如果您在/assets/fonts或vendor/assets/fonts中有字体，Rails 4将找到它们！为了利用这一点，在引导CSS文件中将@font\u 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助手完成的。

在创建app/assets/fonts目录后重新启动“rails服务器”

有时从

assets/fonts

目录中检测不到字体

---

如果安全性不是问题，我们可以将

font

目录放入公用文件夹。然后，它们将在

公共/

级别上可用。

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

在“app/assets/fonts”下添加字体`

从“.css.scss”文件中调用它们，如下所示：

---

如果你们在Rails 5中使用字体有问题，只需编辑

app/assets/config/manifest.js

然后插入此

/=link_tree../font

如何使用：

@font-face{
字体系列：“FontAwesome”；
src:url（'fontoweasome-webfont.eot？v=4.6.3'）；
src:url（'fontawesome-webfont.eot？#iefix&v=4.6.3'）格式（'embedded-opentype'）、url（'fontawesome-webfont.woff2？v=4.6.3'）格式（'woff2'）、url（'fontawesome-webfont.woff？v=4.6.3'）格式（'truetype'）、url（'fontawesome-webfont.svg？v=4.6.3'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}

---

另外，别忘了重新启动服务器。

我刚刚查看了在Rails 4上使用自定义字体设置的一个应用程序。看起来甚至没有必要在路径中添加

字体。删除
路径
添加，重新启动，它应该可以正常工作。已尝试并重新启动服务器。没有变化。在Chrome的开发工具中的Sources下（其中显示服务器下推到客户端的所有资产），我没有看到字体文件或fonts文件夹。此外，控制台仍然返回
404未找到资源
错误。。。不知何故，资产管道没有拾取文件…
字体url
应该自己添加
/assets
前缀，因此不需要指定它。我认为问题在于Rails4不再在资产管道中放置字体版本（没有摘要）。正因为如此，你不能相信/assets/HDV_Peace.eot存在（它在Rails3中存在，现在只有/assets/HDV_Peace-yourdigesthere.eot存在。）请参阅了解更多详细信息我发现只需要一个新的Rails 4应用程序：
font-url（'fontfile.eot？'）。需要重新启动服务器，以便在app/assets下创建字体方向后使其工作。只想注意，您无法使用“字体”属性使其工作。必须指定：
font系列：“HDVPeace”
在application.css.less文件中。浪费了整整20分钟的时间试图找出问题所在，希望这能节省一些人的时间和精力：）下面是一个使用Rails 4和Bourbon为字体设置资产路径的极好方法：（无需编辑application.rb、production.rb或staging.rb中的任何内容。）如果要手动处理字体，可能会重复，以下是我为Rails应用程序构建的解决方案：我在中编写了一种诊断和解决此问题的通用方法。将使用字体url帮助器方法（以及任何帮助器方法）搜索/assets下的任何目录，因此不需要放置“/assets/\u folder”。Rails指南中说：“2.2.1搜索路径当从清单或助手引用文件时，链轮将在三个默认资产位置搜索该文件。默认位置是：app/assets文件夹下的images、javascripts和stylesheets目录，但这些子目录并不特殊-将搜索assets/*下的任何路径“font-url和其他解决方案对我不起作用，但是font\u-url（带下划线）起作用
@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;
}