2

所以 Bootswatch.com 有一些很棒的 twitter bootstrap 主题。不幸的是，当我将 CSS 脚本换成 Bootswatch.com 时，网页加载速度超级慢。当我单击预览或双击 .html 文件时，在我的计算机上。

是什么导致这种情况发生？它甚至没有上传到互联网，这都是本地的。我不明白为什么更改 CSS 会有所作为。更不用说新的 CSS 代码行数更少了。

4

5 回答 5

3

我有完全相同的问题。

问题是它尝试从谷歌字体加载的 CSS 的第一行：

@import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");

只需删除或注释掉这一行，文件就会像这样开始：

 * Bootswatch v3.1.0
 * Homepage: http://bootswatch.com
 * Copyright 2012-2014 Thomas Park
 * Licensed under MIT
 * Based on Bootstrap
于 2014-02-05T11:47:10.957 回答
1

聚会迟到但 URL 坏了，在 URL 前面加上“http:”：

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
于 2014-07-06T15:55:18.027 回答
0

你有没有下载任何带有主题的图像？也许 CSS 有图像的外部引用。

如果您没有，请尝试在“网络”中打开您的萤火虫再次加载您的网站，这样您就可以看到是什么导致加载缓慢。

于 2013-09-12T20:43:39.660 回答
0

来自任何来源的一些主题通常使用易于定制但可能不是最有效的代码。开箱即用的 Bootstrap 2 最多有 2 个 css 文件和 1 个 JS 文件（如果您使用组合文件）

如果我检查Bootswatch Amelia 主题的源代码，我会看到额外的 2 个 CSS 文件、额外的 2 个 JS 文件以及至少 2 个 Google 字体。

这可能并不能解释一切，尽管它肯定无济于事。

祝你好运！

于 2013-09-12T23:31:33.380 回答
-1

如果 Bootswatch 主题加载缓慢并且您发现原因是引用的 Google 字体，您可以尝试将它们嵌入到您的应用程序中以使其离线可用。

最新的 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-07-27T07:38:39.210 回答