没有 Google 字体的引导 CSS答案

【问题标题】：Bootstrap CSS without Google Fonts没有 Google 字体的引导 CSS
【发布时间】：2017-08-21 21:46:24
【问题描述】：

我正在编写一个简单的离线网络应用程序来配置设备（类似于无线路由器设置页面）。

连接到我的设备的计算机没有互联网连接，它将从我的设备上运行的服务器加载页面。

我使用 Bootstrap.css 的 Bootswatch 覆盖来构建页面，因为这是我熟悉的库。但是，我的页面加载挂起，因为浏览器尝试检索 Google 字体但显然无法检索。

是否有不使用 Google 字体的 Bootstrap.css 版本，或者有什么方法可以覆盖它们？

【问题讨论】：

您可以直接进入 Bootswatch 源代码并注释掉 Google 字体参考吗？

标签： html css twitter-bootstrap bootswatch

【解决方案1】：

你不能简单地从你下载的自定义 bootswatch 主题中删除第一行（假设你下载了 css 文件，就像这个 http://bootswatch.com/flatly/bootstrap.css）？

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

这应该使它回退到它可以使用的字体。

【讨论】：

没问题。如果你真的很喜欢主题字体，你可以按照@blairmeister 的建议去做。从谷歌或任何地方下载字体，并用他的回答中的字体替换css文件中的第一行。确保将字体系列名称保留为主题中的原始名称。

【解决方案2】：

你为什么不直接下载你想使用的字体，即 OpenSans，把它放在一个名为“fonts”或类似的子文件夹中，然后使用类似的东西......

@font-face {
  font-family: "OpenSans";
  src: url("/fonts/Opensans.ttf");
}

【讨论】：

【解决方案3】：

如果您出于任何原因不想编辑引导 css（对我来说，它是由 wro4j 从 jar 文件中注入的），那么您可以使用所需的 css 覆盖您自己 css 中的“font-family”，然后包括该 css 文件在您的 Web 应用程序中具有更高的优先级。

@font-face {
font-family: "myFont";
src: url("/fonts/myFont.ttf");
}

body {
  font-family: myfont !important;
}

PA：如果您使用的是 wro4j，那么您的新 css 必须高于 bootstrap webjar。这是一个示例 wro.xml：

<group name="main">
  <css>/styles/my.css</css>
  <css>classpath:META-INF/resources/webjars/bootswatch-spacelab/3.3.1+2/css/bootstrap.min.css</css>
</group>

【讨论】：