Как мы можем использовать @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;
}

В Меньшем использовании есть простой побег ~"..." но не могу придумать рабочий код.
Кто-то использовал это успешно?

Источник

4 ответа

Решение

Вы пытались поместить фамилию шрифта в одинарные кавычки? Следующее работает просто отлично для меня.

    @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();    
}
Источник

Еще одно примечание к проголосовавшему ответу выше; убедитесь, что ваш миксин не имеет круглых скобок, чтобы он анализировался при компиляции в 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" не имеет () за ним.

Источник

Я думаю, это потому, что вам не хватает формата шрифта. Для чего 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-face{
    font-family:FontName;
    font-weight:300;
    font-style:normal;
    font-display:swap;
    src:local('FontName-Light'),
        url(../fonts/FontName-Light.woff2) format("woff2"),
        url(../fonts/FontName-Light.woff) format("woff")
}
x5

И вы можете использовать:

      font: 300 16px @f;
Источник
Другие вопросы по тегам