reveal.js本地运行时如何配置本地字体替代谷歌在线字体

下载Roboto Condensed字体的4款对应样式文件：常规400、粗体700、常规斜体400、粗体斜体700，优先选择体积小、兼容性好的woff2格式。
在reveal.js项目中新建静态资源目录存放字体，比如/assets/fonts/roboto-condensed/，保证npm start启动的本地服务可以正常访问该目录下的资源。

删除原有样式中导入谷歌字体的@import行，在样式文件最开头添加本地字体注册规则，原有字体变量配置无需修改，最终样式示例如下：

// 注册本地Roboto Condensed字体
@font-face {
  font-family: 'Roboto Condensed';
  src: url('/assets/fonts/roboto-condensed/roboto-condensed-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('/assets/fonts/roboto-condensed/roboto-condensed-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('/assets/fonts/roboto-condensed/roboto-condensed-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('/assets/fonts/roboto-condensed/roboto-condensed-bold-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

// 原有主题配置保留即可
$mainFont: 'Roboto Condensed', sans-serif;
$headingFont: 'Roboto Condensed', sans-serif;
...

配置注意事项：

• src的url()路径需要和你实际存放字体的路径匹配：如果使用绝对路径/开头，是相对于服务启动的根目录；如果使用相对路径./或../开头，是相对于当前样式文件的存放路径
• 字体文件名需要和你下载的实际文件名完全一致，注意区分大小写
• 如果需要兼容旧版本浏览器，可以在src中额外添加woff、ttf等格式的字体文件地址

重启npm start服务，断开网络后刷新127.0.0.1:8000页面即可验证字体正常加载，无需联网即可正常显示，切换演示文稿也不需要重载资源。

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