덜 글꼴로 @ font-face를 사용하는 방법

Question

Less에 @font-face 선택기를 사용하는 것이 거의 불가능한 것처럼 보입니다. ~"..."를 사용하여 적은 간단한 탈출이 있습니다

@font-face { 
    font-family: my_font; 
    src: url('http://contest-bg.net/lg.ttf'); 
} 
p { 
    font-family: my_font, "Lucida Grande", sans-serif; 
} 

하지만 코드를 작업과 함께 올 수 없습니다 : 여기

font-family: my_font 

를 사용하려고하면 덜 나는 그것을 사용하려고 어떻게 오류를 제공합니다.
누군가 그것을 성공적으로 사용 했습니까?

Answer 1

작은 따옴표로 글꼴 패밀리 이름을 넣으려고 했습니까? 다음은 나를 위해 잘 작동합니다.

@font-face { 
     font-family: 'cblockbold'; 
     src: url('assets/fonts/creabbb_-webfont.eot'); 
     src: url('assets/fonts/creabbb_-webfont.eot?#iefix') format('embedded-opentype'), 
      url('assets/fonts/creabbb_-webfont.woff') format('woff'), 
      url('assets/fonts/creabbb_-webfont.ttf') format('truetype'), 
      url('assets/fonts/creabbb_-webfont.svg#CreativeBlockBBBold') format('svg'); 
     font-weight: normal; 
     font-style: normal; 

    } 

는 믹스 인으로 글꼴을 사용하려면 시도 :

.ffbasic() { 
    font-family: ff-basic-gothic-web-pro-1,ff-basic-gothic-web-pro-2, AppleGothic, "helvetica neue", Arial, sans-serif; 
} 

을 다음 스타일 선언 내에서 : 위의 투표 대답

.your-class { 
    font-size: 14px; 
    .ffbasic();  
} 

Answer 2

다른 한 메모를; 믹스 인에 괄호가 없도록하여 CSS로 컴파일 할 때 구문 분석되도록하십시오.

전체 예 : 귀하의 변수에

** LESS 파일 : **

// 적은 파일 변수에서 변경할 수있는 글꼴의 경로를 선언

@path-fonts: '../fonts'; 

귀하의 유지 mixin에서

** LESS 파일 : **

.font-names 
{ 

    @font-face { 

     font-family: 'open-sans-light'; 
     src: url('@{path-fonts}/open-sans/OpenSans-Light-webfont.eot') format('enbedded-opentype'), 
      url('@{path-fonts}/open-sans/OpenSans-Light.ttf') format('truetype'), 
      url('@{path-fonts}/open-sans/OpenSans-Light-webfont.woff') format('woff'), 
      url('@{path-fonts}/open-sans/open-sans/OpenSans-Light-webfont.svg#open-sans-light') format('svg'); 

    } 

} 

귀하의 중첩 된 규칙 LESS 파일에서

** : **

@import 'your variables less file name'; 
@import 'your mixin less file name'; 

@font-face { 

    .font-names; 

} 

참고 : ".font-이름"정의가 뒤에()가없는있다.

Answer 3

글꼴 형식이 누락되어 생각합니다. ttf은 truetype이고 누락되거나 올바르지 않으면 글꼴이로드되지 않을 수 있습니다.

@font-face { 
    font-family: "MyFont"; 
    src: url("./my-font.ttf") format("truetype"); 
}