我正在尝试使用从字体松鼠生成的字体作为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;
}
这样做时,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