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

我正在尝试使用从字体松鼠生成的字体作为Twitter Bootstrap的基础字体（从LESS文件编译）。我使用Express.js用Node.js的，并已在bootstrap.less改变的变量包括字体目录中的字体文件，即通过LESS集成字体松鼠生成的字体在Twitter Bootstrap通过LESS

myapp 
|_ public 
    |_ stylesheets 
     |_ font

我已经“安装”字体真棒，有工作，所以我知道目录结构是正确的。使用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'); 
}

注：也有一些是错误的在这里。

UPDATE：

正确声明：

@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; 
}

来源

2013-05-03 baskinomics

我会尝试这样的事情在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或您想要的任何地方。

来源

2013-05-03 08:20:37

这样做时，LESS编译似乎中断。不用调整它，我可以保存LESS文件并编译CSS。但是，在添加LESS文件时未编译。思考？我已经添加了我正在使用的代码片段;它有什么问题吗？ – baskinomics 2013-05-03 09:11:08

更新：字体松鼠存档中提供了3种不同的独特字体。显然，为原始字体提供的CSS标记不正确，因为添加了正确的@ font-face属性。 – baskinomics 2013-05-03 09:25:42

很酷......我很高兴你能把它工作。虽然他们会产生一个破碎的CSS，但有点愚蠢。当我在测试运行之前下载了一些东西，它可以很好地工作。但无论如何，指定要加载的'font-style'和'font-weight'总是很好。 – 2013-05-03 12:32:18

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

回答

相关问题