Question

尽管看了其他答案，但我无法让Bootstrap覆盖我想要使用的Google字体。我试过改变样式表的位置，但没有任何作用任何有关这方面的帮助将不胜感激。

<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

我在文档中只有以下内容，并且它有效。 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 2

也许尝试添加＆＃34;重要＆＃34;在你的身体CSS

＆＃13;

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;
}

＆＃13;

Answer 3

不确定为什么要覆盖字体，但您可以使用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仍在进行中，但功能齐全。

Bootstrap覆盖Google字体

3 个答案: