SCSS导入本地TTF字体

Question

我需要在我的网站上本地导入True Type字体。

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

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

但是我不确定如何从文件中导入它。

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

谢谢

- JZK

Answer 1

如果您没有本地的.ttf字体，请前往Web字体转换网站，我喜欢这个https://onlinefontconverter.com/

选择需要的输出格式，我建议选择 .eot、.woff和svg，以及为了跨浏览器兼容性选择 .ttf。

然后在你的 scss 中使用类似以下代码，导入该字体的所有版本，以实现跨浏览器覆盖率。

更新：仅使用 woff + woff2 格式即可覆盖所有现代浏览器和设备。

别忘了添加后备字体。

@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#'+$font-family) 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>

- Bribbons