Question

我需要在本地为我的网站导入真实类型的字体。

对于远程字体，我总是使用

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

SCSS导入本地ttf字体

1 个答案: