web-dev-qa-db-ja.com

Lessで@ font-faceを使用する方法

Less では、@font-faceセレクターを使用することはほとんど不可能です。使用しようとするとエラーが少なくなります

font-family: my_font

使用方法は次のとおりです。

@font-face {
    font-family: my_font;
    src: url('http://contest-bg.net/lg.ttf');
}
p {
    font-family: my_font, "Lucida Grande", sans-serif;
}

Lessには~"..."を使用した簡単なエスケープがありますが、動作するコードを思い付くことができません。
誰かが正常に使用しましたか？

lessfont-face
34
sensor

フォントファミリー名を一重引用符で囲んでみましたか？以下は私にとってはうまく機能します。

    @font-face {
        font-family: 'cblockbold';
        src: url('assets/fonts/creabbb_-webfont.eot');
        src: url('assets/fonts/creabbb_-webfont.eot?#iefix') format('embedded-opentype'),
             url('assets/fonts/creabbb_-webfont.woff') format('woff'),
             url('assets/fonts/creabbb_-webfont.ttf') format('truetype'),
             url('assets/fonts/creabbb_-webfont.svg#CreativeBlockBBBold') format('svg');
        font-weight: normal;
        font-style: normal;

    }

フォントをミックスインとして使用するには、次を試してください。

.ffbasic() {
    font-family: ff-basic-gothic-web-pro-1,ff-basic-gothic-web-pro-2, AppleGothic, "helvetica neue", Arial, sans-serif;
}

その後、スタイル宣言内で：

.your-class {
     font-size: 14px;
     .ffbasic();    
}
32
j-man86

上記の投票された回答に対するもう1つの注記。ミックスインに括弧がないことを確認して、CSSにコンパイルされたときに解析されるようにしてください。

完全な例：

**変数LESSファイル内：**

//変数レスファイルで変更できるフォントへのパスを宣言します

@path-fonts:    '../fonts';

** Mixins LESSファイル内：**

.font-names
{

    @font-face {

        font-family: 'open-sans-light';
        src: url('@{path-fonts}/open-sans/OpenSans-Light-webfont.eot') format('enbedded-opentype'),
             url('@{path-fonts}/open-sans/OpenSans-Light.ttf') format('truetype'),
             url('@{path-fonts}/open-sans/OpenSans-Light-webfont.woff') format('woff'),
             url('@{path-fonts}/open-sans/open-sans/OpenSans-Light-webfont.svg#open-sans-light') format('svg');

    }

}

**ネストされたルールのLESSファイル：**

@import 'your variables less file name';
@import 'your mixin less file name';

@font-face {

    .font-names;

}

注：「.font-names」定義の後ろに（）がないこと。

5
Leo

フォント形式が不足しているからだと思います。 ttfがtruetypeである場合、見つからないか正しくない場合、フォントはロードされない可能性があります。

@font-face {
  font-family: "MyFont";
  src: url("./my-font.ttf") format("truetype");
}
0
Brian Di Palma