減：第二次調用@ font-face參數混合保持第一次調用的值

我嘗試使用LESS包含Web字體。參數混入這部分做的工作是：減：第二次調用@ font-face參數混合保持第一次調用的值

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

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

可能是什麼原因：再次只是第一個Web字體在CSS註冊？我在這一刻毫無頭緒。非常感謝您提前。

來源

2012-07-23 Anja

似乎是一個錯誤。測試表明，一旦它進入'@ font-face'部分，它不知何故會失去對局部變量的訪問，並且_almost_（雖然不是很好）似乎將它當作全局變量來對待（並且變量只能在其中設置一次其範圍在LESS）。我還沒有找到解決方法。 – ScottS 2012-07-23 03:45:19

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

來源

2012-07-23 11:33:25 ScottS

減：第二次調用@ font-face參數混合保持第一次調用的值

回答

相關問題