SCSS 导入本地 ttf 字体答案

【问题标题】：SCSS Import local ttf fontSCSS 导入本地 ttf 字体
【发布时间】：2021-09-02 05:17:33
【问题描述】：

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

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

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

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

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

谢谢

【问题讨论】：

标签： import fonts sass

【解决方案1】：

如果你没有本地的.ttf字体，去webfont转换网站，我喜欢这个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;
}

&lt;h1&gt;Hey Look! A headline in Arvo bold!&lt;/h1&gt;

【讨论】：