如何覆盖Bootstrap字体？

Question

我目前正在开发一个HTML，我正在使用Bootstrap使它对移动更加友好。然而，bootstrap字体很糟糕，我希望覆盖它，并用更好看的字体取代它。我正在张贴我的HTML文件的头。它看起来是这样的：

<head>
  <title> Connotate Engineering </title>
  <meta name=viewport content='width=700'>   
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">

  <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>

这是我的CSS的样子：

body{
  font-family: 'Arial';
  font-size: 12px;
}

#images{
  font-family: 'Arial';
  text-align:left;
  font-style: regular;
  letter-spacing: 0;
  line-height: 1.5em;
  text-decoration: none;
  word-spacing: 0;
}

#images a{
  margin:0px 20px;
  display:inline-block;
  height: 100%;
  text-decoration:none;
  color:black;
  font-family: 'Arial', serif;
  }

.caption {
  width: 200px;
  text-align: center;
}

@media screen and (max-width:480px) {
  #sidebar { display: none;}
}

Answer 1

从以下位置更改<head>中的链接位置：

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

要这样做：

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">

顺序很重要，您希望最终的更改低于所有其他更改。

正如Arham指出的那样，如果你使用内联风格，那么它的优先级将高于bootstrap。

Answer 2

如果您希望整个页面都具有该字体，那么您应该删除所有元素中的所有字体规则，然后添加body { font-family: 'Indie Flower', cursive; }，或者包括您希望具有该字体的所有元素，如下所示：

body, #images, #images a {
   font-family: 'Indie Flower', cursive;
}

Answer 3

一种方法是在所需的标记本身中添加样式属性。

ie：(你想覆盖div上的某个样式)

<div style = "font-family: Arial">