1

我是 Bourbon & SASS 的新手，并尝试使用@font-face mixin将我下载的字体（Museo Sans）添加到我的 Rails 3 应用程序中。

Bourbon 提供了以下示例：

@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Regular');
@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Bold', bold);
@include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Italic', normal, italic);

// Rails asset-pipeline - place fonts in app/assets/fonts/
@include font-face(SourceSansPro, 'Source_Sans_Pro/SourceSansPro-Regular', normal, $asset-pipeline: true);

我做了什么：

// application.css.scss
@import "bourbon";
@import "fonts";

// fonts.css.scss
@include font-face(MuseoSans, '/fonts/MuseoSans/MuseoSans_500-webfont', normal, $asset-pipeline: true);

* { 
  font-family: MuseoSans;
}

字体位于 assets/fonts/MuseoSans/ 中，文件名如 MuseoSans_500-webfont.eot、.ttf 等。我的印象是你可以放弃扩展名，Bourbon 应该会接收所有文件。

我已经尝试了上述许多不同的变体，但均无济于事。我知道 Bourbon 和文件正在工作，因为当我将 font-family 设置为 $helvetica 时，我在页面上看到了变化。

如果有人可以提供正确的代码，或者我可以查看的 GitHub 项目，我将非常感激。

4

2 回答 2

0

尝试删除路径中的前导“/fonts”，例如：

@include font-face(MuseoSans, 'MuseoSans/MuseoSans_500-webfont', normal, $asset-pipeline: true);
于 2014-01-09T15:25:43.827 回答
0

我在使用这个 mixin 时也遇到了一些问题 - 如果字体目录中不存在以下文件，我会收到 IOerrors：“myfont.eot?#iefix”和“myfont.svg#myfont”。

但是，当我添加这些文件时，我发现它们没有被预编译（即它们缺少 MD5 指纹并且不存在于资产清单中），所以我决定覆盖这个 mixin 并使用修改后的资产路径重写它方法。

于 2014-01-28T23:20:53.303 回答