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>