如何在Jekyll站点中使用.otf字体文件

1. 字体文件的目录放置 #

Jekyll的静态资源（包括字体）统一放在assets目录下，建议创建子目录assets/fonts，把所有Avenir .otf文件（比如Avenir-Book.otf、Avenir-Heavy.otf等）都存入这个目录。Jekyll构建站点时会自动将该目录下的字体文件同步到最终输出目录。

2. 在_sass/file.scss中使用字体 #

通过@font-face规则注册字体，之后就能像使用系统字体一样调用它，示例代码如下：

// 注册不同字重的Avenir字体
@font-face {
  font-family: 'Avenir';
  // 路径说明：若file.scss在_sass目录，编译后CSS会输出到assets/css，因此相对路径为../fonts/
  src: url('../fonts/Avenir-Book.otf') format('opentype');
  font-weight: 400; // 常规字重
  font-style: normal;
}

@font-face {
  font-family: 'Avenir';
  src: url('../fonts/Avenir-Heavy.otf') format('opentype');
  font-weight: 700; // 粗体字重
  font-style: normal;
}

// 全局或局部应用字体
body {
  font-family: 'Avenir', sans-serif;
  font-weight: 400;
}

h1, h2, h3 {
  font-family: 'Avenir', sans-serif;
  font-weight: 700;
}

注：如果你的SCSS文件结构不同，需要调整url()中的路径，确保指向正确的字体文件位置。

内容的提问来源于stack exchange，提问作者QualsPassed