通过LESS将字体松鼠生成的字体集成到Twitter Bootstrap中

我试图使用字体松鼠生成的字体作为Twitter Bootstrap的基础字体（从LESS文件编译）。 我在Node.js中使用Express.js，并在字体目录中包含了字体文件

myapp |_ public |_ stylesheets |_ font 

我已经通过更改bootstrap.less的variables来“安装”Font Awesome，并让它工作，所以我知道目录结构是正确的。 使用字体目录中的自定义字体文件，我下一步要去哪里？ 我是否需要制作一个包含@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 ，或者任何您想要的地方。