Bourbon's @font-face mixin

问题

I'm new to Bourbon & SASS and trying to use the @font-face mixin to add a font I downloaded (Museo Sans) to my Rails 3 app.

Bourbon provides the following examples:

@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);

What I did:

// 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;
}

The fonts are in assets/fonts/MuseoSans/ with filenames like MuseoSans_500-webfont.eot, .ttf, etc. I get the impression you can leave off the extension and Bourbon is supposed to pick up all the files.

I've tried a lot of different variants of the above to no avail. I know that Bourbon and the files are working because when I set the font-family to $helvetica I see a change on the page.

If anyone can provide the proper code, or a GitHub project that I could look at, I'd be much obliged.

回答1:

Try removing the leading "/fonts" in your in your path like:

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

回答2:

I had some issues working with this mixin as well - I would get IOerrors if the following files were not present in the fonts directory: "myfont.eot?#iefix" and "myfont.svg#myfont."

However, when I added those files, I found that they were not getting precompiled (i.e. they lacked a MD5 thumb print and weren't present in the asset manifest), so I decided to override this mixin and rewrite it using modified asset-path methods.

来源：https://stackoverflow.com/questions/20254869/bourbons-font-face-mixin