4

Font Squirrel から生成されたフォントを Twitter Bootstrap (LESS ファイルからコンパイル) のベース フォントとして使用しようとしています。Node.js で Express.js を使用しており、フォント ディレクトリ内にフォント ファイルを含めています。

myapp
|_ public
    |_ stylesheets
        |_ font

変数を変更してFont Awesomeを「インストール」しbootstrap.less、機能させたので、ディレクトリ構造が正しいことがわかりました。ディレクトリにカスタム フォント ファイルがある場合、font次はどこに行けばよいですか? my-custom-font.less宣言を含むファイルを作成する必要があり@font-faceますか、それともブートストラップ LESS ファイルのいずれかでこれを宣言する必要がありますか? 基本フォントが属性をvariables.less介して宣言されていることは認識してい@baseFontFamilyますが、説明したように、これをカスタム フォント ファミリとして宣言する方法がよくわかりません。前もって感謝します。

編集

以下は、私が使用しようとしているコードのスニペットです。

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

1 に答える 1

8

で次のようなことを試します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-03T08:20:37.647 に答える