更少的字体脸部混合 [英] Font Face Mixin for Less

问题描述

使用更少，我将字体家族定义如下:

@georgia: georgia, times, 'times new roman', 'nimbus roman no9 l', serif; 

然后我的mixin较少:

.font(@family: arial, @size: 1.0em, @lineheight: 1.0, @weight: normal, @style: normal, @variant: normal) {
  font: @style @variant @weight @size~"/"@lineheight @family;
} // font

最后我像这样使用它:

p {
  .font(@georgia, 1.0em, 1.5)
}

但是我也想用自定义字体定义字体系列:

@something: 'custom-font', arial, ...;

但是首先我需要注册自定义字体:

@font-face {
  font-family: 'custom-font';
src:url('fonts/custom-font.eot');
src:url('fonts/custom-font.eot?#iefix') format('embedded-opentype'),
    url('fonts/custom-font.woff') format('woff'),
    url('fonts/custom-font.ttf') format('truetype'),
    url('fonts/custom-font.svg#icon') format('svg');
font-weight: normal;
font-style: normal;
}

是否可以为@font-face创建一个LESS mixin，以便我可以传递字体名称和路径并注册字体而无需重复所有这些代码?

我不确定如何将其与我的字体混合集成...

或者如果有更好的方法可以做到这一点...

谢谢， 米格尔(Miguel)

Finally I use it like this:

p {
  .font(@georgia, 1.0em, 1.5)
}

But I would also like to define font families with custom fonts:

@something: 'custom-font', arial, ...;

But first I need to register custom-font:

@font-face {
  font-family: 'custom-font';
src:url('fonts/custom-font.eot');
src:url('fonts/custom-font.eot?#iefix') format('embedded-opentype'),
    url('fonts/custom-font.woff') format('woff'),
    url('fonts/custom-font.ttf') format('truetype'),
    url('fonts/custom-font.svg#icon') format('svg');
font-weight: normal;
font-style: normal;
}

Is it possible to create a LESS mixin for @font-face so I can pass the font name and path and register fonts without repeating all this code?

I am not sure how to integrate this with my font mixin ...

Or if there is even a better way to do this ...

Thank You, Miguel

解决方案

You could define your custom mixin for including custom fonts, but since LESS does not implement any control directives, only guards for mixins (which are useless in the current question's aspect), you cannot shorten the mixin's code for the font-face definition.

.include-custom-font(@family: arial, @weight: normal, @style: normal){
    @font-face{
        font-family: @family;
        src:url('fonts/@{family}.eot');
        src:url('fonts/@{family}.eot?#iefix') format('embedded-opentype'),
            url('fonts/@{family}.woff') format('woff'),
            url('fonts/@{family}.ttf') format('truetype'),
            url('fonts/@{family}.svg#icon') format('svg');
        font-weight: @weight;
        font-style: @style;
    }
}

这篇关于更少的字体脸部混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！