我们如何在Less中使用@ font-face

Question

在Less中,似乎几乎不可能使用@font-face选择器.当我尝试使用时,Less会出错

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使用中有简单的转义~"..."但不能提出工作代码.
有人成功使用它吗？

Answer 1

您是否尝试将字体系列名称放在单引号中？以下工作对我来说很好.

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

    }

要将字体用作mixin,请尝试:

.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();    
}

Answer 2

另一个注意到上面的投票答案; 确保你的mixin没有括号,以便在编译成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"定义后面没有().