为了账号安全,请及时绑定邮箱和手机立即绑定

在Rails资产管道中使用字体

/ 猿问

在Rails资产管道中使用字体

宝慕林4294392 2019-07-13 16:46:51

我在SCSS文件中配置了一些字体,如下所示:

@font-face {
  font-family: 'Icomoon';
  src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
       asset-url('icoMoon.woff', font) format('woff'),
       asset-url('icoMoon.ttf', font)  format('truetype'),
       asset-url('icoMoon.svg#Icomoon', font) format('svg');}

实际的字体文件存储在/app/Asset/fonts/

我增加了config.assets.paths << Rails.root.join("app", "assets", "fonts")到我的application.rb文件

编译的CSS源代码如下:

@font-face {
  font-family: 'Icomoon';
  src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) 
  format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg");}

但是当我运行这个应用程序时,没有找到字体文件。日志:

启动GET“/Asset/icoMoon.ttf”为127.0.0.1在2012-06年23:21:17+0100已送达资产/icoMoon.ttf-404未找到(13 Ms)

为什么资产管道没有将字体文件压缩为Just/Asset?

人们有什么想法吗?



查看完整描述

3 回答

?
撒科打诨
  1. 如果您的Rails版本介于> 3.1.0< 4,将您的字体放置在下列任何文件夹中:


    Rails版本> 4将您的字体放在app/assets/fonts文件夹。

    注:若要将字体放置在这些指定文件夹之外,请使用以下配置:

    config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

    Rails版本> 4.2,是的推荐若要将此配置添加到config/initializers/assets.rb.

    但是,您也可以将其添加到config/application.rb,或到config/production.rb

    • app/assets/fonts

    • lib/assets/fonts

    • vendor/assets/fonts

  2. 在CSS文件中声明字体:

    @font-face {
      font-family: 'Icomoon';
      src:url('icomoon.eot');
      src:url('icomoon.eot?#iefix') format('embedded-opentype'),
        url('icomoon.svg#icomoon') format('svg'),
        url('icomoon.woff') format('woff'),
        url('icomoon.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;}

    确保字体的命名与声明的URL部分完全相同。大写字母和标点符号很重要。在这种情况下,字体应该具有名称。icomoon.

  3. 如果在Rails中使用Sass或更少> 3.1.0(CSS文件.scss.less),然后更改url(...)在字体声明中font-url(...).

    否则,您的css文件应该具有扩展名。.css.erb,字体声明应该是url('<%= asset_path(...) %>').

    如果您正在使用Rails> 3.2.1,你可以用font_path(...)而不是asset_path(...)..这个助手做同样的事情,但更清楚。

  4. 最后,在CSS中使用字体,就像在font-family部分。如果它被声明为大写,您可以这样使用它:

    font-family: 'Icomoon';


查看完整回答
反对 回复 2019-07-13
?
慕田峪4524236

现在有个转折:

你应该把所有字体都放进去app/assets/fonts/因为他们将要默认情况下,在暂存和生产中获得预编译-它们将在被推送到赫鲁库.

放置在vendor/assets将要默认情况下,在暂存或生产时进行预编译-它们将失败。赫鲁库源头!

我坚信把供应商的字体vendor/assets/fonts比把它们放进去更有意义app/assets/fonts..有了这2行额外的配置,这对我来说很好(在Rails 4上):

app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')  app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

我也在rails 4.0.0..实际上,最后一行就足以安全地预编译来自vendor文件夹。花了几个小时才弄明白。希望能帮上忙。


查看完整回答
反对 回复 2019-07-13
?
守着一只汪

你需要用font-url在你的@字体块中,而不是url

@font-face {font-family: 'Inconsolata';src:font-url('Inconsolata-Regular.ttf') format('truetype');font-weight: normal;font-style: normal;}

如您所提到的,在application.rb中还有这一行(用于app/assets/fonts

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


查看完整回答
反对 回复 2019-07-13

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信