Question

我是Bourbon＆amp;的新手。 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项目，我将非常感激。

Answer 1

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

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

Answer 2

我在使用这个mixin时遇到了一些问题 - 如果fonts目录中没有以下文件，我会得到IOerrors：“myfont.eot？#iefix”和“myfont.svg #myfont”。

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

Bourbon的@ font-face mixin

2 个答案: