css - 没有谷歌字体的 Bootstrap CSS 2 (Bootswatch)

Question

我正在开发网页并使用 Bootswatch 进行样式设置。有时我必须离线工作，并在本地托管。不幸的是，Bootswatch 不能离线使用，因为它使用了一个开头带有额外字体的 Bootstrap css 版本:

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");

这意味着每次构建都失败，我无法部署。我看到了这个问题: Bootstrap CSS without Google Fonts但它没有一个令人满意的答案。他们建议只删除该行，但我在部署时仍然需要它，并且由于版本更新，它会在下一次更新时很快被覆盖。我正在寻找一种解决方案:

• 离线时忽略导入
• 覆盖导入，离线时(例如手动导入字体，然后将导入更改为本地字体)，我非常喜欢这个版本

所有这些作为最终解决方案，我不想在每次 npm/bower 更新后更改代码...

Answer 1

最新的 Bootswatch 版本 (> 3.3.6.1) 引入了一个 SASS 变量 $web-font-path，您可以覆盖它并将其设置为空值:

// use google fonts api offline
$web-font-path: '';
@import "fonts.yeti.offline";

@import "yeti/variables";
@import "yeti/bootswatch";

为了离线提供所需的字体，我使用了 https://google-webfonts-helper.herokuapp.com生成 fonts.yeti.offline.scss 文件并下载所需的字体文件。要在在线和离线模式之间切换，您可以切换代码中的前两行。