Bootstrap 覆盖 Google 字体

Question

尽管查看了其他答案，但我无法让 Bootstrap 不覆盖我想要使用的 Google 字体。我已尝试更改样式表的位置，但没有任何效果。
对此的任何帮助将不胜感激。

http://codepen.io/01scatman/pen/KzGdNY

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
   <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="AOS-TC.css">
    <link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>

Answer 1

我有同样的问题。为了解决这个问题，首先，在你的标题中将你的静态 CSS 链接放在比所有其他链接低的位置，即你需要这样的东西

来自

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="AOS-TC.css">
<link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>

到

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="AOS-TC.css">

其次，在你的 CSS 'body' 标签中添加合适的字体

来自

font-family: Arvo;

到

font-family: 'Arvo', sans-serif;

也许这有点晚了。不过，我相信这对以后可能遇到同样问题的人会有所帮助。

Answer 2

我在文档中只有以下内容，并且它有效。 Bootstrap 不会覆盖字体。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="AOS-TC.css">
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>

<style>
  body{
    font-family: 'Arvo', serif;
  }
</style>

Hello

Answer 3

也许尝试在你的身体 CSS 上添加“重要”

body {
  margin: 0;
  padding: .1px;
  position: relative;
  background: url(http://www.adventuresofscatman.com/wp-content/uploads/2015/09/IMG_4273.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #555;
  overflow-x: hidden;
  font-family: Arvo !important;
  font-weight: 700;
}

Answer 4

不确定为什么字体被覆盖，但您可以使用fontSwitcher（在 CodePen 上）来应用它。我在你的笔上试过了，它适用于 Arvo。将此行添加到头部：

<script src="http://codepen.io/freginold/pen/vLJewY.js"></script>

这一行到 JavaScript 部分：

fontSwitcher('fontName', 'elementClass');

fontSwitcher 按类应用 Google 字体，因此如果您想将其应用到整个正文，请为正文分配一个类，然后将字体应用到该类。

您还可以指定备用字体，如下所示：

fontSwitcher('fontName', 'elementClass'[, 'fallbackFont1', 'fallbackFont2' ...]);

免责声明：fontSwitcher 仍在开发中，但功能齐全。