CSS 中字体大小没有变大

Question

我有一个 h1 元素，我想在其他属性中更改它的大小，但唯一改变的是字体系列。请注意，我正在使用一些 bootstrap 网格化，我不知道这可能是导致此问题的原因我对 Bootstrap.

还是个新手

h1{
  font-family: 'Montserrat';
  line-height: 1.5;
  font-size:3.5rem;
}

<head>
   <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
 <div class="row">
      <div class="col-lg-6">
        <h1>Hello World.</h1>
      </div>
      <div class="col-lg-6">
      </div>
 </div>

此外，我在不同的浏览器和设备上尝试了我的代码，我清除了浏览器上的缓存，结果相同。

Answer 1

您 bootstrap 的方向是正确的。弄清楚为什么某些东西起作用或不起作用的最简单方法是检查浏览器中的元素。
你看那里，rfs.scss 覆盖了你的 font-size.
现在你可以 google “如何更改 bootstrap 字体大小”，如果你想改变它，或者创建一个 css-class 并将其分配给你的 h1.

Answer 2

Bootstrap 确实是造成这种情况的原因。当前，您仅使用 h1 元素设置 font-size，该元素被 bootstrap 的 CSS 所否决。

您唯一需要做的就是指定 h1，这样它就会否决 bootstrap。

您也可以使用 !important 作为您的 h1。但我总觉得那条路很简单，而且不太好看。

您的字体可以正常工作的唯一原因是它没有在 bootstrap 的 CSS 中指定。

Answer 3

您只需要在 CSS 查询选择器中更加具体

.bigger {
  font-family: 'Montserrat';
  line-height: 1.5;
  font-size: 3.5rem;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div class="row">
  <div class="col-lg-6">
    <h1 class="bigger">Hello World.</h1>
  </div>
  <div class="col-lg-6">
  </div>
</div>

一些具有更高特异性的示例：

table td    { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }

或在现有选择器之后添加相同的选择器：

td { height: 50px !important; }

或者，最好重写原始规则以避免完全使用 !important。

[id="someElement"] p {
  color: blue;
}

p.awesome {
  color: red;
}

RES: MDN Specificity

Answer 4

如何解决“未应用我的样式”类型的问题

首先，您应该使用浏览器中的 开发工具 来调查 DOM.

中的元素

如您所见，font-size 值被 Bootstrap 的样式覆盖（来自右侧提到的 _rfs.scss 文件）。

选项 A：显示标题（Bootstrap，仅适用于您的情况）

使用 Bootstrap 的 Display Headings。这使您可以在标题上定义不同的字体大小。

对于你的情况，你可以试试这个：

<h1 class="display-1">Hello World.</h1>

选项 B：Class特异性

自己加一个class，在你的CSS中引用这个class。

h1.my-heading {
  font-family: 'Montserrat';
  font-size: 15rem;
}

<head>
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<div class="row">
  <div class="col-lg-6">
    <h1 class="my-heading">Hello World.</h1>
  </div>
  <div class="col-lg-6">
  </div>
</div>

选项 C：重要（不推荐）

使用 !important 关键字，这保证您的样式在 h1 元素上是首选。一旦存在多个 !important 语句，这就会出现问题，并且被认为是 不好的做法。

font-size: 15rem !important;

CSS 中字体大小没有变大

Font-size not getting bigger in CSS

html

css

bootstrap-4

font-size

一些具有更高特异性的示例：

如何解决“未应用我的样式”类型的问题

选项 A：显示标题（Bootstrap，仅适用于您的情况）

选项 B：Class特异性

选项 C：重要（不推荐）

CSS 中字体大小没有变大

Font-size not getting bigger in CSS

html

css

bootstrap-4

font-size

一些具有更高特异性的示例：

如何解决“未应用我的样式”类型的问题

选项 A：显示标题（Bootstrap，仅适用于您的情况）

选项 B：Class特异性

选项 C：重要 （不推荐）

选项 C：重要（不推荐）