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指出的那样，如果你输入内联样式，它的优先级将高于引导程序。

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

如何覆盖Bootstrap字体？

3 个答案: