Rails 4 – 自定义字体
目前我尝试将自定义字体添加到我的Rails 4应用程序中。
- 我将所有字体添加到
assets/fonts - 我将
config.assets.paths << Rails.root.join("app", "assets", "fonts")到config/application.rb - 我在我的
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
字体
你遇到的问题是你正在调用字体文件而没有正确引用它们的路径。
这里的问题与从资产管道引用图像或其他文件时的问题相同 – 如果使用不存在的文件路径，则不会加载（因为资产指纹识别 ）：
指纹识别是一种使文件名依赖于文件内容的技术。 文件内容更改时，文件名也会更改。 对于静态或不经常更改的内容，这提供了一种简单的方法来判断文件的两个版本是否相同，即使是跨不同的服务器或部署日期。
许多Rails资产所带来的是无法引用正确的文件，因为文件路径在precompiled时已更改其名称，从而阻止它们在大多数情况下加载。
路径
要添加@praszyk的答案是你需要使用其中一个asset_paths来获取正确的字体路径，这可以使用Rails附带的一个CSS预处理器 （通常是SCSS或SASS ）来完成
您遇到的问题是使用.css不会这样做 – 您必须使用.sass或.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'); }
使用带有scss将自动调用文件的正确版本 – 是否已指纹识别。
如果你在@praszyk的回答中使用它，它应该 @praszyk
更改：
@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', ...}
由于您在“style.css”中加载了驻留在/ assets / stylesheets（和/ stylesheets /在浏览器中）的字体，因此脚本会尝试加载/stylesheets/oxygen-regular-webfont.eot。
在路径中附加“/ fonts /”应该按预期工作。 如果仍有错误，请检查浏览器的开发者控制台。
不确定你是否解决了这个问题，但我在这个问题的答案中找到了解决方案。 认为这可能有所帮助，Ashitaka一步一步详细解释了一切。