덜 : @ font-face 매개 변수 mixin의 두 번째 호출이 첫 번째 호출의 값을 유지합니다.

Question

웹 글꼴을 덜 포함하려고합니다. 부분적으로 작업을 수행하는 파라 메트릭 믹스 인은 다음과 같은 : 나는 2를 교환 할 때

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

:에

.font1 { .font(24pt, "Black-Rose","Black-Rose-fontfacekit/BLACKR-webfont"); } 
.font4 { .font(24pt, "bubblegum-sans","bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont"); } 

결과 : 그것은 작동

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

미세 존재를 처음 호출 주변 선 :

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

어떤 이유가있을 수 있습니다 :다시 바로 첫 번째 웹 글꼴은 CSS에 등록되어? 나는 그 순간 우둔하다. 미리 감사드립니다.

Answer 1

Based on this current (as of my answer) bug 나는 코드를 수정하기 위해 거기에 게시 된 사람의 해결책을 사용했습니다. 그것은 당신이 (지금 @font-face 블록 내부에서 호출) .fontface 전화로 변수를 전달하지 않는 것이 그래서 @fontName를 입력 복제에 대한 필요성을 생성하지만, 적절한 출력을 제공 않습니다 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; 
}