如何链接从CSS的.ttf字体在轨道？

问题描述

在我的rails项目中有一个自定义字体（/app/assets/fonts/font.ttf）。这个文件夹实际上包含在轨道中吗？

如何在我的css中链接它？我尝试了一些东西，但没有工作（字体，font.ttf，文件的完整路径等）。我已经在rails文档中看过，但是我没有找到这方面的介绍。

解决方案

{app | lib | vendor} / assets应该可以通过资产管道获得。您是否尝试了？ （所有的资产文件，无论/ assets下的子目录结构都可以从/ assets / {filename}得到。例如

• app / assets / javascripts /my_js_file.js => li>
  
• app / assets / stylesheets / style.css =>

请注意，您可以使用sass或erb来生成样式表（if你的样式表被命名为style.css.sass或style.css.erb，那么资产管道将首先运行sass / erb解析器）然后有一个助手可用，参见

最后，这里是一个实际的例子css @ font-face条目用于我关注的网站

  @ font-face {
 fo nt-family：vegurRegular; 
 src：url（'/ assets / vegur-r_0.602-webfont.eot'）; 
 src：local（'☺'），url（'/ assets / vegur-r_0.602-webfont.woff'）格式（'woff'），url（'/ assets / vegur-r_0.602-webfont .ttf'）格式（'truetype'），url（'/ assets / vegur-r_0.602-webfont.svg＃webfontlYuAwLPv'）format（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
} 
  

其中字体文件存储在vendor / assets / fonts中

I have a custom font in my rails project (/app/assets/fonts/font.ttf). Is this folder actually included by rails?

How do I have to link it in my css? I tried some stuff but none worked ("font", "font.ttf", the full path to the file, etc). I already looked in the rails documentation but I didn't find where this is talked about..

解决方案

By default anything stored in {app|lib|vendor}/assets should be available through the assets pipeline. have you tried http://my.server/assets/font.ttf ? (All asset files regardless of the subdirectory structure under /assets will be available from /assets/{filename} e.g

• app/assets/javascripts/my_js_file.js => http://my.server/assets/my_js_file.js
• app/assets/stylesheets/style.css => http://my.server/assets/style.css

Note that you can use sass or erb to help generate your stylesheets (if your stylesheet is named style.css.sass or style.css.erb then the asset pipeline will run the sass/erb parser over the file first) then there's a helper available see the asset pipeline rails guide

Finally here's an actual example of the css @font-face entry used I a site I look after

@font-face {
  font-family: 'vegurRegular';
  src: url('/assets/vegur-r_0.602-webfont.eot');
  src: local('☺'), url('/assets/vegur-r_0.602-webfont.woff') format('woff'), url('/assets/vegur-r_0.602-webfont.ttf') format('truetype'), url('/assets/vegur-r_0.602-webfont.svg#webfontlYuAwLPv') format('svg');
  font-weight: normal;
  font-style: normal;
}

where the font files are stored in vendor/assets/fonts

这篇关于如何链接从CSS的.ttf字体在轨道？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！