没有Google Fonts 2的Bootstrap CSS(Bootswatch) [英] Bootstrap CSS without Google Fonts 2 (Bootswatch)

问题描述

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

I'm developing a webpage and I use Bootswatch for styling. Sometimes I have to work offline, and host locally. Unfortunately Bootswatch can't be used offline since it uses a version of Bootstrap css with an extra font at the begining:

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

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

This means build fails every time, and I can't deploy. I've seen the question: Bootstrap CSS without Google Fonts But it doesn't have a satisfactory answer. They suggest just deleting that line, but I still need it when deploying, and because of version updates it would get overwritten very fast anyway at the next update. I'm looking for a solution which either:

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

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

And all this as a final solution, I don't want to change the code after every npm/bower update...

推荐答案

最新的Bootswatch版本(> 3.3.6.1)引入了SASS变量 $ web-font-path ，您可以对其进行覆盖和设置设置为空值:

The latest Bootswatch versions (> 3.3.6.1) introduce a SASS variable $web-font-path that you can override and set to an empty value:

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

To serve the required fonts offline, I used https://google-webfonts-helper.herokuapp.com to generate the fonts.yeti.offline.scss file and to download the required font files. To switch between online and offline mode, you can toggle the first two lines in your code.

这篇关于没有Google Fonts 2的Bootstrap CSS(Bootswatch)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！