如何覆盖 Bootstrap 字体？答案

【问题标题】：How do I override Bootstrap font?如何覆盖 Bootstrap 字体？
【发布时间】：2015-09-18 05:16:45
【问题描述】：

我目前正在开发一个 HTML，我正在使用 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;}
}

【问题讨论】：

在 font-family 上使用关键字 !important。
喜欢在 font-family 之前添加吗？
例如，如果要确保字体始终为 arial，请执行以下操作： font-family: 'Arial' !important;

标签： html css web

【解决方案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 指出的那样，如果您放入内联样式，它将比引导程序具有更高的优先级。

【讨论】：

【解决方案2】：

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

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

【讨论】：

只有字幕在改变。我想更改 h1 和 h2 标签
您必须删除每个标签的字体集，或者在原始代码中添加更多元素，例如：body, #images, #images a, h1, h2, h3, h4...
我确实尝试过 h1, h2{font-family: Arial};它没有工作
在这种情况下，在 Arial !important 之类的字体名称之后添加 !important，但我认为您想要的字体是“Indie Flower”而不是 Arial，对吗？
知道了。我只是在尝试不同的字体，但这成功了。谢谢

【解决方案3】：

一种方法是在所需标签本身内添加样式属性。

ie:（你想覆盖 div 上的某种样式）

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

【讨论】：

出于可维护性的原因，我强烈建议不要使用内联样式。