浏览器不尊重引导程序中的字体答案

【问题标题】：Browsers not honoring fonts in bootstrap浏览器不尊重引导程序中的字体
【发布时间】：2017-11-18 10:16:53
【问题描述】：

我创建了一个基本的Bootstrap starter template 来试验各种可用的 bootswatch 主题。我注意到当我更改我的 bootswatch 主题（例如，从“cerulean”到“yeti”）时，虽然在浏览器中更改了主题的 css 中指定的颜色，但字体没有改变在 Firefox（更新 53）或 Chrome（版本 59）中；但是，IE 11 确实显示了正确的字体。无论我选择什么 bootswatch 主题，主题的 css 中的字体都只能在 IE 中使用。

到目前为止，我对答案的搜索一直很短。我已经引用了“http://stackoverflow.com/questions/23608504/css-code-for-eras-light-itc”这个问题，但我不确定这是否是我所反对的，或者是否是我遇到的其他问题。

【问题讨论】：

有问题的字体是“Open Sans”，通过 bootstrap.css 应用于：body { font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,无衬线字体; }

标签： css internet-explorer firefox twitter-bootstrap-3

【解决方案1】：

您是使用 Google 字体呈现 Open Sans 还是您的 Bootswatch 主题的字体？如果您通过 Google 字体呈现，请确保指向它的链接位于 bootstrap.css 文件之后。

另外：如果您正在使用实时站点，请确保您不会被站点的缓存所阻碍（这可能会导致 .css 文件的更改延迟显示）。

【讨论】：

嗯？字体文件必须在引用它的样式表之前加载。你搞错了。
哎呀！你是对的，我把它打反了。
字体在我的 Bootswatch 主题中。我的第一个 css 链接用于 Bootstrap（'lib/bootstrap/dist/css/bootstrap.min.css'），第二个链接用于 Bootswatch 主题 css（'lib/bootswatch/yeti/bootstrap.min.css'）。该网站处于开发阶段，而不是生产阶段。
AFAIK，Bootswatch 主题是独立的，如果您尝试同时运行 Bootstrap 3 和 Bootswatch 主题，您会遇到这样的问题。尝试注释掉您的引导 CDN，看看是否能解决问题。
注释掉引导 CDN 会导致相同的行为。我相当肯定 Bootstrap 需要对 Bootstrap 核心 css 的引用，然后是对您要使用的自定义 Bootswatch 样式/模板 css 的引用。

【解决方案2】：

Bootswatch 模板和核心 Bootstrap css 引用了字体“Open Sans”，但该字体不是系统上的字体。它需要从页面顶部的谷歌网络字体库下载： <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans"/>。完成后，页面将根据 Bootswatch 模板加载，同时支持颜色和字体。

【讨论】：