Question

在我的Node.js应用中，我使用bootstrap-sass和Compass。不是gulp-compass和任务，而是Compass，我在app的root目录中有Compass'config.rb文件。我用这些命令编译我的资产：

$ compass watch
$ compass compile

我不明白如何在页面上包含bootstrap的字体以启用glyphicons。字体存储在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

这是我编译的资产存在的位置以及服务器从中获取资产的位置。这就是我现在所做的 - 我手动将前端移到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 =＆gt;中的任何更改css编译，无论我设置它们。文档非常悲惨。

fonts_dir =
fonts_path =
http_fonts_path =
http_fonts_dir =

Answer 1

我认为您可以在Bootstrap - Sass: relative glyphicons icon path

找到答案

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

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

1 个答案: