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

Question

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

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

错误 app/src/stylesheets/main.scss（第 25 行：文件未找到或无法找到 阅读： /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。