css - 如何处理 bootstrap-sass 和 compass 中的字体？如何在页面上正确包含字体？

Question

在我的 Node.js 应用程序中，我使用 bootstrap-sass和 Compass .不是gulp-compass和任务，但确切地说是 Compass，我在应用程序的根目录中有 Compass 的 config.rb 文件。我使用这些命令编译我的 Assets :

$ compass watch
$ compass compile

而且我不明白如何在页面上包含 Bootstrap 的字体以启用字形。字体存储在 bower_components\bootstrap-sass\assets\fonts\bootstrap 中。 Bootstrap-sass 字体变量如下:

$bootstrap-sass-asset-helper: false !default;

//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.

//** Load fonts from this directory.

// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
// $icon-font-path: 'fonts/';

//** File name for all font files.
$icon-font-name:          "glyphicons-halflings-regular" !default;
//** Element ID within SVG icon file.
$icon-font-svg-id:        "glyphicons_halflingsregular" !default;

Compass 将其编译成这个 css:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot");
  src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}

而且我的页面上没有 Glyphicons，因为现在可以在 ../fonts/bootstrap/glyphicons-halflings-regular.eot 中找到字体。

如何处理字体？我是否必须手动从

移动字体

bower_components\bootstrap-sass\assets\fonts\bootstrap 

我的

public/css/fonts

这是我编译的 Assets 所在的地方，也是服务器从中获取它们的地方。这就是我现在所做的——我手动将前端移动到 public/css/fonts 并且不得不手动键入不同的 @font-face:

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url("fonts/glyphicons-halflings-regular.eot");
    src: url("fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("fonts/glyphicons-halflings-regular.woff") format("woff"), url("fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
}

但这是正确的方法吗？那么，如果我必须手动处理字体和路径，为什么还需要 Compass？

config.rb 中有几个 Compass 字体选项。如何使用它们让 Compass 关心字体和路径？我尝试了这些选项，但它们似乎不起作用，我没有注意到 scss => css 编译中的任何更改，无论我如何设置它们。文档也很惨。

fonts_dir =
fonts_path =
http_fonts_path =
http_fonts_dir =

Answer 1

我想您很可能会在这里找到答案Bootstrap - Sass: relative glyphicons icon path

TLDR 版本是您应该尝试取消注释 config.rb 中的 relative_assets 行