引导CSS没有谷歌字体2( Bootstrap )

nnsrf1az 于 2023-02-14 发布在 Bootstrap

关注(0)|答案(2)|浏览(142)

我正在开发一个网页，我使用Bootswatch来设计样式。有时我不得不离线工作，并在本地托管。不幸的是，Bootswatch不能离线使用，因为它使用的Bootstrap css版本在开始时有一个额外的字体：

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

这意味着每次构建都失败，我无法部署。我看到过这样的问题：Bootstrap CSS without Google Fonts但它没有一个令人满意的答案。他们建议只是删除该行，但我仍然需要它部署时，由于版本更新，它会被覆盖非常快，无论如何在下一次更新。我正在寻找一个解决方案，其中之一：

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

2条答案

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

根据this和this的讨论，我发现了在Bootswatch scss中禁用字体加载的好方法：

$web-font-path: false;