更新时间: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: