波旁威士忌的@font面混合

Question

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

波旁提供了以下示例：

@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等。我觉得你可以去掉扩展名，波旁应该会拾取所有文件。

我尝试了很多不同的变体，但都没有用。我知道波旁和文件正在工作，因为当我将字体系列设置为$helvetica时，我会在页面上看到一个更改。

如果有人能提供合适的代码，或者我可以查看的GitHub项目，我将不胜感激。

Answer 1

尝试在您的路径中删除前导"/fonts"，如：

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

Answer 2

我在使用这个mixin时也遇到了一些问题-如果字体目录中没有以下文件，我会收到IOerrors："myfont.eot？#iefix"one_answers"myfont.svg#myfont。"

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