我尝试使用LESS包含Web字体。部分完成工作的参数mixin如下:
.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; }
第一次调用它很好:
.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; }
当我换掉2条线时:
.font4 { .font(24pt, "bubblegum-sans","bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont"); }
.font1 { .font(24pt, "Black-Rose","Black-Rose-fontfacekit/BLACKR-webfont"); }
再次只是在CSS中注册了第一个Web字体:
.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; }
可能是什么原因?我此刻无能为力。 非常感谢你提前。
答案 0 :(得分:2)
Based on this current (as of my answer) bug,我使用了一个人在那里发布修改代码的解决方案。它创建了复制输入@fontName
的需要,这样就可以避免将变量传递给.fontface
调用(现在从@font-face
块内部调用),但它确实给了适当的输出:
<强> 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输出
.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;
}