引入Google Fonts的Dancing Script字体后无法修改h1字号怎么解决

问题原因 #

自定义样式文件引入顺序错误，导致样式被Bootstrap默认规则覆盖：你当前将index.css放在Bootstrap CSS之前引入，Bootstrap自带的h1标签样式优先级更高，直接覆盖了你设置的font-size属性。额外给本身就是斜体设计的Dancing Script字体设置font-style: italic会触发伪斜体渲染，也可能干扰字号计算。

修复方案 #

• 调整CSS文件引入顺序，将自定义样式文件放在所有第三方样式（Google Fonts、Bootstrap）之后引入，确保自定义规则优先级最高
• 移除不必要的font-style: italic属性，避免字体渲染异常
• 可选：给选择器增加权重（比如改成header h1）或给font-size添加!important兜底，避免被其他规则覆盖

修正后的代码 #

HTML（仅调整head内的link引入顺序） #

<!DOCTYPE html>
<html>
    <head>
        <title>Main Page</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 先引入第三方资源 -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
        <!-- 最后引入自定义样式，确保能覆盖前面的规则 -->
        <link rel="stylesheet" href="index.css">
    </head>

    <body>
        <div class="container align-items-center d-flex h-100">
          <header class="text-center col-12">
              <h1>Flavoroso</h1>
          </header>
        </div>
    </body>
</html>

修正后的CSS #

h1 {
  background-color: rgb(167, 166, 165, 0.5);
  font-family: "Dancing Script", cursive;
  font-size: 7rem;
  color: rgb(29 28 28);
}

内容的提问来源于stack exchange，提问作者Arpitha Prakash