4

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

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

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

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

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

4

2 回答 2

3

最新的 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 文件并下载所需的字体文件。要在在线和离线模式之间切换,您可以切换代码中的前两行。

于 2016-05-28T21:22:19.720 回答
0

根据这个这个讨论,我找到了在 Bootswatch scss 中禁用字体加载的好方法:

$web-font-path: false;
于 2021-08-28T17:59:37.673 回答