Bootstrap 4外部样式表字体属性不生效问题求助

时隔多年重新用Dreamweaver搭建第一个网站，使用Bootstrap时遇到样式问题：想要自定义H1-H6及P标签的样式，在外部CSS中添加H1样式后，字体族设置能保留，但字体大小在切换操作或刷新测试页面后会恢复默认值；H2至H6标签均存在相同问题，P标签大小虽能保留但无法调细。仅在Dreamweaver拆分视图修改CSS时，样式会临时正确显示。

自定义H1样式代码 #

h1 {
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", 
"sans-serif";
    font-size: 8em;
    text-align: left
}

前置CSS代码 #

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica 
Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe 
UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #0A0A0A;
    text-align: left;
    background-color: #fff;
}

当前效果截图 #

问题原因及解决办法 #

问题核心

Bootstrap自带的标题样式优先级高于你编写的外部CSS样式，刷新后Bootstrap的默认样式会覆盖你的自定义设置。

具体解决方式

1. 调整CSS引入顺序：将你的自定义CSS文件放在Bootstrap CSS文件之后引入，后加载的样式会自动覆盖前置的同选择器样式。
2. 提升选择器优先级：使用更具体的选择器来强化自定义样式的权重，比如：

body h1 {
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
    font-size: 8em;
    text-align: left;
}

3. 临时验证用!important（不推荐长期大量使用，仅适合新手快速确认问题）：

h1 {
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
    font-size: 8em !important;
    text-align: left;
}

4. 清除缓存：Dreamweaver的预览缓存可能导致临时显示异常，修改后务必保存文件并刷新浏览器查看真实效果，同时确认自定义CSS已正确上传至服务器。

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