SCSS 로컬 ttf 글꼴 가져 오기

Question

로컬로 트루 타입 글꼴을 가져와야합니다. 원격 글꼴의 난 항상

@import url('https://example'); 

하지만 파일에서 가져올하는 방법을 잘 사용하고

.

나는 그것이 매우 간단하다고 믿지만 나는 찾을 수 없었고 좋은 결과를 얻었다.

, 나는 .eot 선택하는 것이 좋습니다 것입니다, 당신은 로컬 .TTF 폰트를 가지고 webfont 변환 사이트로 이동 해달라고하면

Answer 1

, 나는이 일 https://onlinefontconverter.com/

는 당신이 필요로하는 출력 형식을 선택 좋아 주셔서 감사합니다 .woff 및 svg와 .ttf를 함께 사용하여 브라우저 간 호환성을 확보하십시오.

그런 다음 scss에서이 기능을 사용하여 브라우저 간 범위에 해당 글꼴의 모든 버전을 가져옵니다.

그냥 fallback 글꼴을 추가하는 것을 잊지 마십시오.

@mixin font($font-family, $font-file) { 
 
    @font-face { 
 
    font-family: $font-family; 
 
    src: url($font-file+'.eot'); 
 
    src: url($font-file+'.eot?#iefix') format('embedded-opentype'), 
 
    url($font-file+'.woff') format('woff'), 
 
    url($font-file+'.ttf') format('truetype'), 
 
    url($font-file+'.svg#aller') format('svg'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    } 
 
} 
 

 

 
@include font('Arvo', '/htdocs/lib/fonts/Arvo'); 
 
@include font('Arvo-Bold', '/htdocs/lib/fonts/Arvo-Bold'); 
 

 

 
h1 { 
 
    font-family: Arvo-Bold, Arial-bold, arial, sans-serif; 
 
}

<h1>Hey Look! A headline in Arvo bold!</h1>