css - 更少的字体混合

Question

我使用 Less 定义字体系列如下:

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

然后我有较少的混合:

.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，这样我就可以传递字体名称和路径并注册字体而无需重复所有这些代码？

我不确定如何将它与我的字体混合...

或者如果有更好的方法...

谢谢你，米格尔

Answer 1

您可以定义包含自定义字体的自定义 mixin，但由于 LESS 不实现任何控制指令，仅实现 mixin 的保护(在当前问题的方面无用)，您不能缩短字体的 mixin 代码定义。

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