Question

我正在使用Rails 4.0.2和ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-linux]以及标准（内置）rails服务器，需要一些帮助才能在我的应用程序中加载和使用以下字体图标 - http://fontello.com/。< / p>

我已经下载了字体文件并将它们放在/vendor/assets/fonts/文件夹中。然后在/vendor/assets/stylesheets/shared/fonts.css文件中添加了以下代码：

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

似乎所有内容都正确加载，因为浏览器控制台中没有任何错误。

然后，使用下面的HTML我试图获得一些图标：

<div>
  <span data-icon="0xe800">test</span>
  <span data-icon="icon-emo-happy">test</span>
  <a href="##url##">0xe809</a>
</div>

但现在显示的图标 - 只是文字（我不确定这是加载它们的正确方法）。

在文档中说：

通常，apache已经有必要的设置，但是nginx和   应调整其他网络服务器。这是我们的mime类型列表   文件扩展名：


application/vnd.ms-fontobject - eot

application/x-font-woff - woff

application/x-font-ttf - ttf

image/svg+xml - svg

所以，在/config/initializers/mime_types.rb文件中我尝试了这个：

Mime::Type.register_alias "application/vnd.ms-fontobject", :eot
Mime::Type.register_alias "application/x-font-woff", :woff
Mime::Type.register_alias "application/x-font-tt", :ttf
Mime::Type.register_alias "application/image/svg+xml", :svg

和此：

Rack::Mime::MIME_TYPES['.eot'] = 'application/vnd.ms-fontobject'
Rack::Mime::MIME_TYPES['.woff'] = 'application/x-font-woff'
Rack::Mime::MIME_TYPES['.ttf'] = 'application/x-font-ttf'
Rack::Mime::MIME_TYPES['.svg'] = 'image/svg+xml'

服务器重启但没有任何改变。

有没有人有这方面的经验并可以帮助我？

Answer 1

问题是由未正确加载的字体文件引起的。如果您使用css文件声明您的字体类，则需要按照以下步骤操作：

在aplication.rb文件中添加以下行：
```
config.assets.paths << Rails.root.join('app', 'vendor','assets', 'fonts')
```
在上述情况下，字体文件位于app/vendor/assets/fonts文件夹中。

声明字体类时，请在URL中使用assets + font name引用，如下所示：

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

在我的情况下，我还需要另外require保存字体类声明的css文件。在我的application.css文件中，我添加了以下行：

* = require shared / fonts.css

注意：在我的情况下，font.css文件位于/vendor/assets/stylesheets/shared/文件夹中。

如何加载和使用字体图标？

1 个答案: