减:@字体面参数混入的第二个电话保持值从第一个电话(Less: second call of @fo

2019-07-30 13:33发布

我尝试包括网页字体用量少。 参数混入这部分做的工作如下:

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

再次只是第一个Web字体被登记在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; }

可能是什么原因? 我在那一刻毫无章法。 预先感谢您非常多。

Answer 1:

在此基础上电流(如我的回答的)错误 ,我用了一个解决方案的人张贴有修改代码。 它为进入的复制需要@fontName使您免去传递变量到.fontface调用(这是现在从内部被称为@font-face块),但它确实给适当的输出:

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


文章来源: Less: second call of @font-face parametric mixin keeps values from first call