node.js - 通过 LESS 在 Twitter Bootstrap 中集成 Font Squirrel 生成的字体

Question

我正在尝试使用从 Font Squirrel 生成的字体作为 Twitter Bootstrap 的基本字体(从 LESS 文件编译)。我将 Express.js 与 Node.js 一起使用，并将字体文件包含在字体目录中，即

myapp
|_ public
    |_ stylesheets
        |_ font

我通过更改 bootstrap.less 中的变量“安装”了 Font Awesome 并让它工作，所以我知道目录结构是正确的。有了 font 目录中的自定义字体文件，我下一步该去哪里？我是否需要制作一个包含 @font-face 声明的 my-custom-font.less 文件，或者我是否需要在 LESS Bootstrap 之一中声明它文件？我知道基本字体是通过 @baseFontFamily 属性在 variables.less 中声明的，但是正如我所描述的，我不太确定如何将其声明为我的自定义字体字体系列。提前致谢。

编辑

下面是我尝试使用的代码片段:

@ChatypePath: "font";

@font-face {
  font-family: 'chatypeb2.1regular';
  src: url('@{ChatypePathPath}/chatypeb2.1regular-webfont.eot?v=3.0.1');
  src: url('@{ChatypePathPath}/chatypeb2.1regular-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
       url('@{ChatypePathPath}/chatypeb2.1regular-webfont.woff?v=3.0.1') format('woff'),
       url('@{ChatypePathPath}/chatypeb2.1regular-webfont.ttf?v=3.0.1') format('truetype');
}

注意:这里有一些错误。

更新:

正确声明:

@chatypeFontFamily:     "ChatypeB2.1ThinThin", "Courier New", monospace;

@font-face {
    font-family: 'ChatypeB2.1ThinThin';
    src: url('font/chatypeb2.1thin-webfont.eot');
    src: url('font/chatypeb2.1thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/chatypeb2.1thin-webfont.woff') format('woff'),
         url('font/chatypeb2.1thin-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Answer 1

我会在 variables.less 中尝试这样的事情:

@customFontFamily: "Custom", "Courier New", monospace;

/* here you should use whatever @font-face squirrel generated in the stylesheet.css */
@font-face {
  font-family: 'Custom';
  font-style: normal;
  font-weight: 400;
  src: local('Custom'), local('Custom-Regular'), url(path.to.font.file.woff) format('woff');
}

你也可以将font-face放到一个单独的文件中，然后使用@import，但我认为没有必要。然后您可以调用 @cusomFontFamily 并将其用作 @baseFontFamily，或任何您想要的地方。