Bootstrap CSS 没有 Google 字体

Question

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

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

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

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

Answer 1

你为什么不下载你想使用的字体，即 OpenSans，将它放在一个名为 "fonts" 或类似名称的子文件夹中，然后使用类似这样的字体...

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

Answer 2

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

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

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

Answer 3

如果您出于任何原因不想编辑 bootstrap css（对我而言，它是由 wro4j 从 jar 文件注入的），那么您可以覆盖 'font-family'您自己的 css 与您想要的 css 文件，然后将该 css 文件以更高的优先级包含在您的网络应用程序中。

@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>

Bootstrap CSS 没有 Google 字体

Bootstrap CSS without Google Fonts

html

css

twitter-bootstrap

bootswatch