我们如何在Less中使用@ font-face [英] How we can use @font-face in Less

问题描述

在少中，似乎几乎无法使用@font-face选择器.尝试使用

In Less, it seems almost impossible to use @font-face selector. Less gives errors when I try to use

font-family: my_font

这是我尝试使用它的方式:

Here is how I try to use it:

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

使用~"..."在Less中可以进行简单的转义，但是无法提供有效的代码.
有人成功使用了吗?

There is simple escape in Less using ~"..." but can't come up with working code.
Had someone used it successfully?

推荐答案

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

Have you tried putting the font family name in single quotes? The following works just fine for me.

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

    }

要将字体用作混入，请尝试:

To use font as a mixin, try:

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

这篇关于我们如何在Less中使用@ font-face的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！