SCSS導入本地ttf字體

Question

我需要在本地爲本地導入真正的字體字體。

對於遠程字體，我一直在使用

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

，但不知道如何從文件導入。

我相信這很簡單，但我無法找到和好的結果。

謝謝

Answer 1

如果你沒有一個本地的.ttf字體，去一個web字體轉換的網站，我喜歡這個https://onlinefontconverter.com/

選擇您需要的輸出格式，我會建議選擇.eot， .woff和svg以及您的.ttf，以實現跨瀏覽器兼容性。

然後在你的scss中，使用類似這樣的東西導入該字體的所有版本以供跨瀏覽器覆蓋。

不要忘記添加備用字體。

@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>