如何在Bootstrap 4中修改H1的font-family？新手技术求助

嘿，刚学Bootstrap遇到这种小问题太正常了！我帮你拆解一下问题出在哪，以及怎么快速解决：

核心问题：CSS引入顺序搞反了 #

看你给出的完整代码，你把自己的stylesheet.css放在了Bootstrap CSS的前面——后加载的CSS样式会覆盖先加载的同优先级样式，所以你之前写的CSS完全被Bootstrap的默认样式盖过去了，自然没效果！

第一步：调整CSS引入顺序 #

把你的自定义CSS文件放在Bootstrap CSS之后，这样你的样式就能覆盖Bootstrap的默认样式了：

<!-- 先引入Bootstrap的CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- 再引入你的自定义CSS -->
<link rel="stylesheet" href="stylesheet.css">

第二步：在自定义CSS中修改字体族 #

你的H1用了Bootstrap的display-2类，直接针对这个类写样式就可以（优先级足够，不需要用!important）：

/* stylesheet.css 中的代码 */
.display-2 {
  /* 替换成你想要的字体，比如 'Arial', 'Times New Roman', '微软雅黑' 等 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

如果想让所有H1标签都用这个字体（不管有没有加display类），可以这么写：

h1 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

（如果发现还是被覆盖，再考虑加!important，但优先用前面的顺序调整和精准选择器，尽量少用!important）

额外提示（可选） #

如果想用系统没有的自定义字体（比如小众字体或第三方字体），需要先在HTML中引入字体资源，再在CSS中使用。比如引入第三方字体的话，要在所有CSS之前加对应的字体引入代码，之后就可以在CSS里直接调用该字体名称了。

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