Geek Answers Handbook

How to use font-face with cssless?

There was already a little talk about problems with cssless and font-face, for example here: How can we use @ font-face in Less

But this problem seems different, and I wonder if anyone has found a workaround to this? I think my lesser syntax is right though.

If I write the following:

.setFont (@fontName) {
    @font-face {
        font-family: '@{fontName}';
        src: url('../fonts/@{fontName}.eot'); 
        src: url('../fonts/@{fontName}.eot?#iefix') format('embedded-opentype'), 
        url('../fonts/@{fontName}.ttf')  format('truetype');
    }
}
.setFont ('myfont1');   
.setFont ('myfont2');   
.setFont ('myfont3');

It will output the following:

@font-face {
  font-family: 'myfont1';
  src: url('../fonts/myfont1.eot');
  src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'),
  url('../fonts/myfont1.ttf') format('truetype');
}
@font-face {
  font-family: 'myfont1';
  src: url('../fonts/myfont1.eot');
  src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'),
  url('../fonts/myfont1.ttf') format('truetype');
}
@font-face {
  font-family: 'myfont1';
  src: url('../fonts/myfont1.eot');
  src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'),
  url('../fonts/myfont1.ttf') format('truetype');
}

It takes only the first variable. It is interesting, is it because they are not called inside the element, although I tried to call it inside the element with the same results.

How do you use cssless with font-face?

Thank.

+5
source share
1 answer

, LESS, .

, @fontName , . . , (, border-radius (@radius), , . , .

, , - (), , , mixin. . , . , , , . .setFont , , .

, , - @arguments, , @font-face. @font-face , , , .

+2

More articles:


All Articles