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

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

34 голосов
/ 01 декабря 2011

В Меньше кажется почти невозможным использование селектора @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;
}

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

Ответы [ 3 ]

32 голосов
/ 11 января 2012

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

    @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();    
}
5 голосов
/ 28 августа 2014

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

0 голосов
/ 16 февраля 2018

Я думаю, это потому, что вам не хватает формата шрифта.Что для ttf равно truetype, если он отсутствует или неправильный, шрифт может быть не загружен. 

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