Rails 4 - 自定义字体

Question

目前我正在尝试将自定义字体添加到我的 Rails 4 应用程序中。

1. 我将所有字体添加到assets/fonts
2. 我将config.assets.paths << Rails.root.join("app", "assets", "fonts") 添加到config/application.rb
3. 我将脚本添加到我的style.css

  @font-face {
      font-family: 'oxygenregular';
      src: url(font-path('oxygen-regular-webfont.eot') + "?#iefix") format('embedded-opentype'),
           url(font-path('oxygen-regular-webfont.woff')) format('woff'), 
           url(font-path('oxygen-regular-webfont.ttf'))  format('truetype'),
           url(font-path('oxygen-regular-webfont.svg') + "#MyFont") format('svg');
  }

  body {
    font-family: 'oxygenregular', arial;
    background: #f4f5f9;
    background-image: url(../images/bg-pattern.png);
    background-position: 0 bottom;
    background-repeat: no-repeat;
  }

我没有收到像404 (Not Found) 这样的错误，因为我在修改config/application.rb 之前收到了错误

但是应用程序没有加载我已经放置的字体。我尝试使用原生 HTML，字体运行良好，但是当我尝试将它们放入 Rails 应用程序时，它不会加载。a

Answer 1

字体

您遇到的问题是您在调用字体文件时没有正确引用它们的路径。

这里的问题与您从资产管道引用图像或其他文件时相同 - 如果您使用不存在的文件路径，它就不会加载（因为asset fingerprinting）：

指纹是一种使文件名依赖的技术 关于文件的内容。当文件内容发生变化时， 文件名也改变了。对于静态或不频繁的内容 改变，这提供了一种简单的方法来判断一个版本的两个版本是否 文件是相同的，即使跨不同的服务器或部署日期。

许多 Rails 资产的问题是无法引用正确的文件，因为当您 precompiled 它们时文件路径的名称已更改，导致它们在大多数情况下无法加载。

---

路径

要添加到@praszyk 的答案是您需要使用asset_paths 之一来提取正确的字体路径，这可以使用Rails 附带的CSS preprocessors 之一来完成（通常SCSS 或 SASS)

您遇到的问题是使用 .css 不会这样做 - 您必须使用 .scss 或 .sass：

#app/assets/stylesheets/style.css.scss
@font-face { font-family: 'oxygenregular'; 
             src: asset_url('/fonts/oxygen-regular-webfont.eot' + "?#iefix") 
             format('embedded-opentype'), 
               asset_url('/fonts/oxygen-regular-webfont.woff') format('woff'),
               asset_url('/fonts/oxygen-regular-webfont.ttf') format('truetype'), 
               asset_url(font-path('/fonts/oxygen-regular-webfont.svg') + "#MyFont") format('svg'); }

将asset_url 与scss 一起使用将自动调用文件的正确版本——无论是否带有指纹。

如果您将其与@praszyk 的答案一起使用，它应该希望能工作

Answer 2

变化：

@font-face { font-family: 'oxygenregular'; 
             src: url(font-path('/fonts/oxygen-regular-webfont.eot') + "?#iefix") 
             format('embedded-opentype'), 
             url(font-path('/fonts/oxygen-regular-webfont.woff')) format('woff'),
             url(font-path('/fonts/oxygen-regular-webfont.ttf')) format('truetype'), 
             url(font-path('/fonts/oxygen-regular-webfont.svg') + "#MyFont") format('svg'); }

body { font-family: 'oxygenregular', ...}

由于您正在加载位于 /assets/stylesheets（和浏览器中的 /stylesheets/）中的“style.css”中的字体，因此脚本会尝试加载 /stylesheets/oxygen-regular-webfont.eot。

将“/fonts/”附加到您的路径应该可以按预期工作。 如果仍有错误，请检查浏览器的开发者控制台。