SCSS导入本地ttf字体

Question

我需要在本地为Web端导入True Type字体。

对于远程字体，我一直使用

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

但不确定如何从文件导入。

我相信这很简单，但我找不到并取得好结果。

谢谢

Answer 1

如果您没有本地.ttf字体，请访问一个webfont转换站点，我喜欢这个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>