且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在Rails 4中使用字体

更新时间:2023-02-21 09:44:50

@ font-face 声明非常接近,你只是在url声明中缺少 / assets p>

  @ font-face {
font-family:'HDVPeace';
src:url('/ assets / HDV_Peace.eot');
src:url('/ assets / HDV_Peace.eot?iefix')格式('eot'),
url('/ assets / HDV_Peace.woff')格式('woff'),
url('/ assets / HDV_Peace.ttf')格式('truetype'),
url('/ assets / HDV_Peace.svg#webfont')format('svg');



$ b

任何添加到 assets.paths 可直接在开发和生产环境下的 / assets 路径下使用。您只需在 application.rb 中的资产路径修改行,在 development.rb production.rb 只是多余的。

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



是一个新鲜的Rails 4应用程序提供自定义字体。除了css中的font-face import语句以外,还增加了一个页面来显示其他内容:

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


I have a Rails 4 application and I am trying to use a custom font.

I have followed many tutorials on this and somehow it's just not working for my application.

I am using application.css.less and have the following declaration:

@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');
}

Note: I have tried using url() instead of font-url() also. The former generates 404 errors on the console, where the latter just doesn't seem to do anything at all. In the chrome dev tools under resources, the font files are not appearing under the assets folder, or anywhere

in my config/application.rb I have:

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

And in both my config/environments/development.rb and config/environments/production.rb I have:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf)

My font files are located at app/assets/fonts and are not contained in a folder below that...

What am I missing?

UPDATE:

folder structure

app
 |----assets
        |----fonts
               |----HDV_Peace.eot
               |----HDV_Peace.svg
               |----HDV_Peace.ttf
               |----HDV_Peace.woff

Your @font-face declaration is very close, you are just missing the /assets prefix within the url declaration.

@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');
}

Anything that has been added to assets.paths is available directly under the /assets path in both development and production. You only need the asset path modification line within application.rb, doing it again in development.rb and production.rb is just redundant.

Additionally, all of the font formats are essentially binary. There is no need to pre-compile them, so you can safely remove the assets.precompile addition.

Here is a fresh Rails 4 application serving custom fonts. Aside from the font-face import statement in the css and the addition of a page to display nothing else has been done to it:

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