Less 如何在更少的时间内使用@font-face

在中，似乎几乎不可能使用

@font-face

选择器。当我尝试使用时，Less会给出错误

font-family: my_font

以下是我如何尝试使用它：

@font-face{
字体系列：我的字体；
src:url（'http://contest-bg.net/lg.ttf');
}
p{
字体系列：my_字体，“Lucida Grande”，无衬线；
}

少用

~“…”

有简单的转义，但不能产生有效的代码。

---

有人成功地使用了它吗？

您是否尝试过将字体系列名称用单引号引起来？下面的方法对我来说很好

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

---

上述投票答案的另一个注释；确保mixin没有括号，以便在编译为CSS时对其进行解析

完整示例：

**在无变量文件中：**

.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');

    }

}

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

@font-face {

    .font-names;

}

//声明可在无变量文件中更改的字体路径

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

    }

}

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

@font-face {

    .font-names;

}

**在嵌套的无规则文件中：**

.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');

    }

}

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

@font-face {

    .font-names;

}

---

注意：在“.font-names”定义后面没有（）符号。

我认为这是因为缺少字体格式。对于

ttf

而言，它是

truetype

，如果缺少或不正确，则可能无法加载字体

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

我的LESS代码：

@fontName: 'FontName';
@fontWeights: 'Light', 'Medium', 'SemiBold', 'Bold', 'ExtraBold';
@fontWeightsNum: 300, 400, 500, 600, 700;

.fontFace(@indexPrefix: 1) when (@indexPrefix =< length(@fontWeights)) {
    @fontWeight: extract(@fontWeights, @indexPrefix);
    @fontWeightNum: extract(@fontWeightsNum, @indexPrefix);

    @fontFullName: "@{fontName}-@{fontWeight}";
    @fileName: "../fonts/@{fontFullName}";
    @font-face {
        font-family: @fontName;
        font-weight: @fontWeightNum;
        font-style: normal;
        font-display: swap;
        src: local('@{fontFullName}'),
            url('@{fileName}.woff2') format("woff2"),
            url('@{fileName}.woff') format("woff");
    }

    .fontFace(@indexPrefix + 1);
}
.fontFace();
@f: '@{fontName}', "Helvetica Neue", sans-serif;

您可以使用：

font: 300 16px @f;

---

我从来没有在更少的时间里遇到过@font-face的问题。不过我使用的是PHP实现，所以我猜这是原始实现中的一个缺陷。您可能想尝试将“my_font”放在引号中（不知道这是否有用，但肯定不会让事情变得更糟，呵呵）。您使用的是less.js的哪个版本？在什么环境下？当我在浏览器或WinLess中尝试你的代码时，它不会给出任何错误，并且编译正确。我在我的许多项目中使用@font-face以及LESSCS都没有问题。但是，请检查您正在使用的lesscss版本，因为某些旧版本不支持此属性。你根本不应该使用逃跑技巧。是的，这对我也很有用。它还可以在url中的文件上不加引号，并且格式上仍然使用单引号。