reveal.js

Question

我最近在我的 reveal.js 演示文稿中使用默认的 google-字体 URL 作为字体，这让我搬起石头砸自己的脚，因为我不得不重新加载浏览器（切换演示文稿） ), 如果没有 Wifi，字体缓存会丢失并且不会被重建，因此我最终得到了一个看起来很糟糕的默认无衬线字体。

所以。我想通过 npm start 从我的笔记本电脑 包含用于 reveal.js 演示文稿 、运行本地的字体和 127.0.0.1:8000，以便浏览器在本地查找字体，就像查找 html 和 css 一样，无需访问互联网。

这是我的自定义方案中的内容：

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap');

// Override theme settings (see ../template/settings.scss)
$mainFont: 'Roboto Condensed', sans-serif;
$headingFont: 'Roboto Condensed', sans-serif;
...

如何下载必要的字体，如何更改此方案以使用本地字体？

Answer 1

你就不能简单地抓取这里的字体吗https://github.com/davidcunningham/roboto-condensed/tree/master/fonts

然后将其添加到您的样式表中？

@font-face {
  font-family: 'RobotoCondensed-Regular';
  src: url('/path/to/fonts/RobotoCondensed-Regular.woff') format('woff')
}

然后在你的样式中调用它

font-family:'RobotoCondensed-Regular';

** 对每个字体粗细重复，因为此字体不可变。

reveal.js - 使用本地提供的字体在本地提供服务

reveal.js - locally served with locally provided fonts

css

node.js

google-fonts