如何使用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文件夹下或任何位置

在我的配置/ application.rb我有:

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

在我的配置/环境/ development.rb和配置/环境/ production.rb我有:

config.assets.paths << Rails.root.join('app','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声明非常接近,你只是丢失了/ assets前缀在url声明。
@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.rb和production.rb中再次执行它只是多余的。

此外,所有的字体格式基本上都是二进制的。没有必要预先编译它们,所以你可以安全地删除assets.precompile添加。

这里是一个新鲜的Rails 4应用程序提供自定义字体。除了在css中的font-face import语句和添加一个页面以显示没有别的已经做了:

https://github.com/sorentwo/font-example

相关文章

什么是设计模式一套被反复使用、多数人知晓的、经过分类编目...
单一职责原则定义(Single Responsibility Principle,SRP)...
动态代理和CGLib代理分不清吗,看看这篇文章,写的非常好,强...
适配器模式将一个类的接口转换成客户期望的另一个接口,使得...
策略模式定义了一系列算法族,并封装在类中,它们之间可以互...
设计模式讲的是如何编写可扩展、可维护、可读的高质量代码,...