通過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

回答

相關問題