整合字体松鼠生成的字体在Twitter Bootstrap通过LESS

Question

我正在尝试使用从font Squirrel生成的字体作为Twitter Bootstrap的基础字体(从LESS文件编译)。我使用Express.js与Node.js，并已包括字体目录内的字体文件，即

myapp
|_ public
    |_ stylesheets
        |_ font

我已经"安装"字体Awesome通过改变bootstrap.less中的变量并使其工作，所以我知道目录结构是正确的。有了font目录中的自定义字体文件，我下一步该去哪里?我是否需要制作包含@font-face声明的my-custom-font.less文件，或者我是否需要在一个引导LESS文件中声明这一点?我知道基本字体是通过@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，或者任何你想要的