Compass SCSS font-url 配置问题答案

【问题标题】：Compass SCSS font-url configuration issueCompass SCSS font-url 配置问题
【发布时间】：2013-11-26 15:00:32
【问题描述】：

我在这里使用 compass sass 写了一个模板，字体混合在没有设置网络字体的情况下产生了一些问题。我的配置文件就像

http_path = "/"
css_dir = "resources/stylesheets"
sass_dir = "resources/stylesheets" 
images_dir = "resources/images"
javascripts_dir = "resources/js"

然后通过使用字体混合生成的输出是

@font-face {
 font-family: "cabinregular";
src: url('resources/stylesheets/fonts/cabin-regular.eot?#iefix') format('embedded- 
opentype'), url('resources/stylesheets/fonts/cabin-regular.ttf') format('truetype'),
 url('resources/stylesheets/fonts/cabin-regular.woff') format('woff');
 }

路径正确，但在运行 html 时字体不会应用。但是如果我指定 http 路径，例如

   http_path="/somename/"

它适用。那为什么不指定http_path就不行呢？

【问题讨论】：

也许你应该添加 fonts_dir。例如：fonts_dir = "fonts" 或者我认为 fonts_dir = "resources/fonts"。

标签： sass compass-sass

【解决方案1】：

在主 src 之前带上src: url("../fonts/cabin-regular?#iefix"); 可以正常工作

@font-face {
  font-family: 'cabinregular';
  src: url("../fonts/cabin-regular?#iefix");
  src: url("../fonts/cabin-regular?#iefix") format("embedded-opentype"), url("../fonts/cabin-regular") format("woff"), url("../fonts/cabin-regular") format("truetype"), url("../fonts/cabin-regular.svg#cabin-regular") format("svg");
  font-weight: normal;
  font-style: normal;
}

【讨论】：