使用Less我正在定义font-family如下：
@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,所以我可以传递字体名称和路径并注册字体,而不重复所有这些代码？
我不知道如何将它与我的字体混合
或者如果还有一个更好的方法来做到这一点…
谢谢,
米格尔
解决方法
您可以定义自定义混合包含自定义字体,但由于LESS不实现任何控制指令,只能保护mixins(在当前问题的方面无用),因此您无法缩短mixin的字体定义的代码.
.include-custom-font(@family: arial,@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;
}
}
