如何正确地将 webfonts 包含到 bootstrap-sass 项目中？

Question

我创建了一个bootstrap-sass project with yeoman generator。

我想添加一个网络字体，但每次编译我的 scss 代码时，我都会收到以下错误：

error app/src/stylesheets/main.scss (Line 25: File not found or cannot be read: /Users/username/Desktop/testfolder/fonts/../fonts/nexa-webfont/nexaheavy-webfont.woff)

我怎样才能摆脱不必要的 ../testfolder/fonts/.. 路径中的文件夹?

我的 main.scss 看起来像这样：

// VER: 0.1

/* OVERRIDDEN BOOTSTRAP VARIABLES */
$icon-font-path: "../fonts/bootstrap/";

/* STANDARD INCLUDES */
@import "bootstrap-compass";
@import "bootstrap-sprockets";
@import "bootstrap";
@import "compass/css3";

/* CUSTOM FONT IMPORT */
@include font-face(
  "Nexa Heavy",
  inline-font-files(
    '../fonts/nexa-webfont/nexaheavy-webfont.woff', woff,
    '../fonts/nexa-webfont/nexaheavy-webfont.ttf', ttf,
    '../fonts/nexa-webfont/nexaheavy-webfont.svg', svg),
    '../fonts/nexa-webfont/nexaheavy-webfont.eot',
  normal, // font-weight
  normal  // font-style
);


/* CUSTOM INCLUDES */
@import "custom-variables";
@import "common";
@import "navigation";
@import "footer";

@import "pages/home";

Answer 1

当我们导入我们使用的字体时：

@font-face {
  font-family: "diogenesregular";
  src: asset-url("assets/diogenes-webfont.eot");
  src: asset-url("assets/diogenes-webfont.eot?#iefix") format("embedded-opentype"),
  asset-url("assets/diogenes-webfont.woff2") format("woff2"),
  asset-url("assets/diogenes-webfont.woff") format("woff"),
  asset-url("assets/diogenes-webfont.ttf") format("truetype"),
  asset-url("assets/diogenes-webfont.svg#diogenesregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

虽然不太确定您的设置或字体包。我们将所有字体放在 app/assets/fonts 中，并在 app/assets/stylesheets/fonts.scss 中导入上面的字体，然后在 application.scss.

中导入此文件

如何正确地将 webfonts 包含到 bootstrap-sass 项目中？

How to correctly include webfonts into a bootstrap-sass project?

ruby-on-rails

webfonts

twitter-bootstrap

bootstrap-sass

compass-sass