Как мы можем использовать @font-face в Less

В 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;
}

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

Ответы

Ответ 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;

    }

Чтобы использовать шрифт в качестве микса, попробуйте:

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

Ответ 2

Еще одно примечание к проголосовавшему ответу выше; убедитесь, что ваш mixin не имеет круглых скобок, чтобы он разбирался при компиляции в CSS.

Полный пример:

** В ваших переменных LESS File: **

//Объявляем путь к вашим шрифтам, которые вы можете изменить в файлах с переменными меньше

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

** В вашем микшинге МЕНЬШИЙ файл: **

.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" нет() позади него.