开发中途引入Bootstrap CDN导致全局字体缩小，如何不使用!important恢复原字体大小？

这问题我做项目时也踩过坑！Bootstrap默认会给<html>根元素设置基准字体大小（通常是16px），同时给<body>设置font-size: 1rem，这会直接覆盖你之前自定义的字体基准，导致整个页面字体看起来缩小了。不用!important这种粗暴方式的话，有几个优雅的解决办法：

• 调整根元素的rem基准值
  Bootstrap大量使用rem作为字体单位，所以只要把根元素的font-size设回你原来的基准大小就行。比如你原来页面的默认字体是18px，就在你的自定义CSS里添加：

  html {
    font-size: 18px; /* 替换成你自己原来的基准字体大小 */
  }
  

  关键要记住：把你的自定义CSS文件放在Bootstrap CDN的引入代码之后，这样你的样式优先级会高于Bootstrap的默认样式，自然就能覆盖它。

• 直接重置body的字体大小
  如果你的原始样式是直接给<body>设置固定px值的字体，那也可以在自定义CSS里重新定义body的字体大小：

  body {
    font-size: 16px; /* 替换成你原来的body字体大小 */
  }
  

  不过这个方法只针对body的字体，Bootstrap的组件（比如按钮、卡片里的文字）还是会受rem基准影响，所以第一种方法更彻底。

• 用SCSS变量提前修改Bootstrap配置（进阶方案）
  如果你不是用CDN引入Bootstrap，而是用SCSS版本编译的话，可以直接修改Bootstrap的内置变量，从根源上改变基准字体：

  // 先设置你的自定义基准字体大小
  $font-size-base: 18px;
  // 再引入Bootstrap
  @import "bootstrap";
  

  这样编译出来的Bootstrap所有相关样式都会用你设置的基准，完全不需要后续的样式覆盖。

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