Less:第二次调用@ font-face参数mixin保持第一次调用的值 [英] Less: second call of @font-face parametric mixin keeps values from first call
问题描述
我尝试在LESS中加入网页字体。参数mixin的部分工作如下:
I try to include web fonts with LESS. The parametric mixin which partly does the job is the following:
.fontface(@fontName, @fontFile) {
@font-face {
font-family: @fontName;
src: url("@{fontFile}.eot");
src: url("@{fontFile}.eot?#iefix") format('embedded-opentype'),
url("@{fontFile}.woff") format('woff'),
url("@{fontFile}.ttf") format('truetype'),
url("@{fontFile}.svg#DistantGalaxyRegular") format('svg');
font-weight: normal;
font-style: normal; } }
.font(@fontsize:10pt, @fontName:"Aierbazzi", @fontFile:"Aierbazzi-fontfacekit/aierbazzi-webfont") {
.fontface(@fontName, @fontFile);
font-family:@fontName;
font-size:@fontsize; }
它第一次调用时工作正常:
It works fine being called the first time:
.font1 { .font(24pt, "Black-Rose","Black-Rose-fontfacekit/BLACKR-webfont"); }
.font4 { .font(24pt, "bubblegum-sans","bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont"); }
导致:
.font1 {
font-family:"Black-Rose";
font-size:24pt; }
@font-face {
font-family:"Black-Rose";
src:url("Black-Rose-fontfacekit/BLACKR-webfont.eot");
src:url("Black-Rose-fontfacekit/BLACKR-webfont.eot?#iefix") format('embedded-opentype'),url("Black-Rose-fontfacekit/BLACKR-webfont.woff") format('woff'),url("Black-Rose-fontfacekit/BLACKR-webfont.ttf") format('truetype'),url("Black-Rose-fontfacekit/BLACKR-webfont.svg#DistantGalaxyRegular") format('svg');
font-weight:normal;
font-style:normal; }
.font4 {
font-family:"bubblegum-sans";
font-size:24pt; }
@font-face {
font-family:"Black-Rose";
src:url("Black-Rose-fontfacekit/BLACKR-webfont.eot");
src:url("Black-Rose-fontfacekit/BLACKR-webfont.eot?#iefix") format('embedded-opentype'),url("Black-Rose-fontfacekit/BLACKR-webfont.woff") format('woff'),url("Black-Rose-fontfacekit/BLACKR-webfont.ttf") format('truetype'),url("Black-Rose-fontfacekit/BLACKR-webfont.svg#DistantGalaxyRegular") format('svg');
font-weight:normal;
font-style:normal; }
当我交换两行时:
.font4 { .font(24pt, "bubblegum-sans","bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont"); }
.font1 { .font(24pt, "Black-Rose","Black-Rose-fontfacekit/BLACKR-webfont"); }
只是第一个网络字体在CSS中注册:
again just the first web font is registered in the CSS:
.font4 {
font-family:"bubblegum-sans";
font-size:24pt; }
@font-face {
font-family:"bubblegum-sans";
src:url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.eot");
src:url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.eot?#iefix") format('embedded-opentype'),url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.woff") format('woff'),url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.ttf") format('truetype'),url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.svg#DistantGalaxyRegular") format('svg');
font-weight:normal;
font-style:normal;}
.font1 {
font-family:"Black-Rose";
font-size:24pt; }
@font-face {
font-family:"bubblegum-sans";
src:url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.eot");
src:url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.eot?#iefix") format('embedded-opentype'),url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.woff") format('woff'),url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.ttf") format('truetype'),url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.svg#DistantGalaxyRegular") format('svg');
font-weight:normal;
font-style:normal; }
可能是什么原因?我现在无能为力。
提前非常感谢。
What could be the reason? I am clueless in the moment. Thank you very much in advance.
推荐答案
基于这个当前(作为我的回答)错误,我使用一个解决方案一个人张贴在那里修改您的代码。它创建需要输入 @fontName
的复制,以避免将变量传递到 .fontface
call它现在从 @ font-face
块中调用),但它提供了正确的输出:
Based on this current (as of my answer) bug, I used a solution a person posted there to modify your code. It creates the need for a replication of entering the @fontName
so that you avoid passing a variable into .fontface
call (which is now called from inside the @font-face
block), but it does give the proper output:
LESS
.fontface(@fontName:"Aierbazzi", @fontFile:"Aierbazzi-fontfacekit/aierbazzi-webfont") {
font-family: @fontName;
src: url("@{fontFile}.eot");
src: url("@{fontFile}.eot?#iefix") format('embedded-opentype'),
url("@{fontFile}.woff") format('woff'),
url("@{fontFile}.ttf") format('truetype'),
url("@{fontFile}.svg#DistantGalaxyRegular") format('svg');
font-weight: normal;
font-style: normal;
}
.font(@fontsize:10pt, @fontName:"Aierbazzi"){
font-family:@fontName;
font-size:@fontsize;
}
.font1 {
.font(24pt, "Black-Rose");
@font-face {
.fontface("Black-Rose","Black-Rose-fontfacekit/BLACKR-webfont");
}
}
.font4 {
.font(24pt, "bubblegum-sans");
@font-face {
.fontface("bubblegum-sans","bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont");
}
}
CSS输出 p>
CSS Output
.font1 {
font-family: "Black-Rose";
font-size: 24pt;
}
@font-face {
font-family: "Black-Rose";
src: url("Black-Rose-fontfacekit/BLACKR-webfont.eot");
src: url("Black-Rose-fontfacekit/BLACKR-webfont.eot?#iefix") format('embedded-opentype'), url("Black-Rose-fontfacekit/BLACKR-webfont.woff") format('woff'), url("Black-Rose-fontfacekit/BLACKR-webfont.ttf") format('truetype'), url("Black-Rose-fontfacekit/BLACKR-webfont.svg#DistantGalaxyRegular") format('svg');
font-weight: normal;
font-style: normal;
}
.font4 {
font-family: "bubblegum-sans";
font-size: 24pt;
}
@font-face {
font-family: "bubblegum-sans";
src: url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.eot");
src: url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.eot?#iefix") format('embedded-opentype'), url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.woff") format('woff'), url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.ttf") format('truetype'), url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.svg#DistantGalaxyRegular") format('svg');
font-weight: normal;
font-style: normal;
}
这篇关于Less:第二次调用@ font-face参数mixin保持第一次调用的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!