Angular.js (.ttf)에 글꼴 포함

Question

Angular.js 응용 프로그램에서 사용해야하는 .ttf 글꼴 파일이 있습니다. 나는 그것을 가져오고 내 CSS 파일에 액세스하는 방법을 모르겠다.

누군가이 글꼴 파일을 Angular/CSS와 함께 사용하면서 어떤 방향을 제시 할 수 있습니까?

Answer 1

글꼴을 포함하면 angularjs와 아무런 관련이 없습니다. 당신은 CSS 파일에 선언해야한다 :

는 스타일 시트 선언, 예로서 내 자신의 덩어리를 가지고 :

@font-face { 
font-family: 'Durant'; 
src: url('../fonts/DurantBold.eot'); /* IE9 Compat Modes */ 
src: url('../fonts/DurantBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
    url('../fonts/DurantBold.otf') format('opentype'), /* Legacy iOS */ 
    url('../fonts/DurantBold.svg#Durant-Bold') format('svg'), /* Legacy iOS */ 
    url('../fonts/DurantBold.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('../fonts/DurantBold.woff') format('woff'); 
font-weight: bold; 
} 

이 경로가 CSS 파일에 상대적 것을 기억하십시오.

오늘날 대부분의 파일 형식은 대부분의 브라우저에서 지원됩니다. 특히 브라우저와 글꼴 간의 비 호환성을 잘 모릅니다. 이 스타일은 다소 오래되었습니다.

게다가 나는 (글꼴 당 1 파일, 형식 당, 체중 변화, 스타일 변형 당 1 파일 - 매우 실망 스럽습니다.)이 입니다. 가지고 있지 않은 파일에 대해서는 config를 포함하지 않을 것입니다.

당신 만 .CSS 파일이 조각 필요한 파일 만 .TTF있는 경우 :

@font-face { 
font-family: 'Durant'; 
src: url('../fonts/DurantBold.ttf') format('truetype'); 
font-weight: bold; 
} 

가 실제로 어디 것 페이지에서,이 덩어리를 선언 된 CSS 파일을 포함하도록 기억을 그걸 써. 상태 (ngRouter/ui.router)를 사용하는 경우, 부분 페이지가 아닌 MAIN 페이지에 글꼴을 포함 시키십시오.

이 CSS 파일 중 하나 존재의 선언에서 액세스 할 수있는 위치에있는 글꼴 파일 (.TTF)을 가지고을 기억

• 절대 URL/CDN을 :이 아무런 설명을 필요로하지 않는다.
• site-to-site URL : /로 시작하는 경로는 항상 문서 루트와 관련된 경로를 나타냅니다.
• relative url : /로 시작하지 않는 경로는 현재 CSS 파일과 관련이 있습니다.

많은 시간을 썼지 만 잊어 버리면 항상 두통이 발생합니다.