波旁威士忌@字体-面型混合 [英] Bourbon's @font-face mixin

问题描述

我是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和文件工作正常，因为当我将字体系列设置为$Helvetica时，我在页面上看到了变化。

如果有人能提供适当的代码或GitHub项目供我参考，我将不胜感激。

推荐答案

尝试删除路径中的前导"/Fonts"，如：

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

这篇关于波旁威士忌@字体-面型混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！