字体面型更少
字体面型更少
提问于 2013-08-02 14:23:46
使用更少的字体，我定义字体族如下：
@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创建一个更少的混音，这样我就可以传递字体名称和路径并注册字体而不必重复所有这些代码？
我不知道如何把它和我的字体混音.
或者如果有更好的方法.
谢谢你，米格尔
回答 7
Stack Overflow用户
回答已采纳
发布于 2013-08-02 14:42:57
您可以为包含自定义字体定义自定义混合器，但是由于code没有实现任何控制指令，所以只能保护混合器(在当前问题的方面是无用的)，因此不能缩短用于字体面定义的混合器代码。
.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;
}
}Stack Overflow用户
发布于 2014-02-11 19:45:34
我知道这是个老职位，但是，我这样解决了这个问题，希望它能帮到别人。
首先，我创建了一个参数混合，它将在@字体面内重复：
.loadFont(@Weight; @Name; @Local; @Eot:'@{Local}.eot'; @Woff:'@{Local}.woff'){
font-family: 'Open Sans';
font-style: normal;
font-weight: @Weight;
src: url(@Eot);
src: local(@Name), local(@Local), url(@Eot) format('embedded-opentype'), url(@Woff) format('woff');
}然后加载我所有的web字体(在本例中是打开的sans)
@font-face {.loadFont(100;'Roboto Thin';'Roboto-Thin')}
@font-face {.loadFont(300;'Roboto Light';'Roboto-Light')}
@font-face {.loadFont(400;'Roboto Regular';'Roboto-Regular')}
@font-face {.loadFont(500;'Roboto Medium';'Roboto-Medium')}
@font-face {.loadFont(700;'Roboto Bold';'Roboto-Bold')}
@font-face {.loadFont(900;'Roboto Black';'Roboto-Black')}然后，使用CSS规则创建第二个参数混合器，以应用于元素。
.font(@weight:400; @size:14px; @font-family:'Open Sans', sans-serif){
font:@arguments;
}最后，我把它用在我的元素上
div.someClass{
.font(); //to accept all default parameters
}
div.otherClass{
.font(100; 40px); //to specify weight and size
}作为副词。我的所有*.eot和*.woff文件都在LESS文件旁边，并被命名为@Local参数(Open-Sans.woff \ Open-Sans.eot)。
Stack Overflow用户
发布于 2014-03-06 18:05:35
我喜欢在文件夹上构造字体，如下所示：
/fonts/OpenSans-Bold/OpenSans-Bold.eot
/fonts/OpenSans-Bold/OpenSans-Bold.svg
/fonts/OpenSans-Bold/OpenSans-Bold.ttf
/fonts/OpenSans-Bold/OpenSans-Bold.woff我用这个较少的混音来表示字体：
.font-face(@fontName: sans-serif; @fontWeight: normal; @fontStyle: normal) {
@font-face {
font-family: @fontName;
src: url('@{pTheme}/fonts/@{fontName}/@{fontName}.eot');
src: url('@{pTheme}/fonts/@{fontName}/@{fontName}.eot?#iefix') format('embedded-opentype'),
url('@{pTheme}/fonts/@{fontName}/@{fontName}.woff') format('woff'),
url('@{pTheme}/fonts/@{fontName}/@{fontName}.ttf') format('truetype'),
url('@{pTheme}/fonts/@{fontName}/@{fontName}.svg#@{fontName}') format('svg');
font-weight: @fontWeight;
font-style: @fontStyle;
}
}其中：
@pTheme: "../../themes/[THEME NAME]";混音呼叫示例：
.font-face('OpenSans-Bold');我制作了@pTheme变量，这样我也可以在背景图像上使用它，如下所示：
background: url("@{pTheme}/images/logo.png") no-repeat;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18019314
复制相关文章
相似问题
腾讯云开发者
