html - Bootstrap 4 - 在 Ubuntu Chrome 和 Firefox 中呈现的字体大小截然不同

Question

我正在 Ubuntu 上开发一个站点。当我在 Firefox 中查看它时，它比我在 Chrome 中查看时小很多。截图:

两种浏览器的默认字体都设置为 16px 的 DejaVu Serif。我没有弄乱 Bootstrap 的默认字体大小。还是1rem。

造成这种差异的原因是什么，有没有办法进一步规范浏览器之间的差异？

编辑:我的 scss，即使它不相关，因为它被请求:

$theme-colors: (
    "burnt-orange": #fa7334,
    "light-blue": #67e2f5,
    "dark-blue": #006f80,
    "beige": #f5d5bc
);

.header-icon {
  font-size: 1.4rem;
}

#jumbo {
  background: transparent;
  border: 1px solid grey;
}

#diva-sidebar ul {
  list-style-type: none;
  padding-left: 0.65em;
}

#footer a {
  color: white;
}

.errors {
  border: 1px solid #c70f36;
  color: #c70f36;
  background-color: #ffc0cb;
}

@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-pro/css/all.css";

.header-icon-link-blue {
  color: theme-color("dark-blue") !important;

  :hover {
    color: theme-color-level("dark-blue", 2) !important;
  }
}

.header-icon-link-orange {
  color: theme-color("burnt-orange") !important;

  :hover {
    color: theme-color-level("burnt-orange", 2) !important;
  }
}

.color-burnt-orange {
  color: theme-color("burnt-orange");
}

编辑:添加后

html {
    font-size: 16px;
}

到我的 custom.scss 文件，但问题仍然存在。

Answer 1

我在使用 Bootstrap 4.x 设计网站时发现了类似的问题。问题是 Bootstrap 使用浏览器的默认字体大小，然后由此设置相对字体大小。但是，Firefox 和 Chrome 似乎使用不同的默认大小，当您在标题上使用较大的字体时，这会导致问题最为明显。最简单的解决方案是在 html 上设置精确的基本字体大小以覆盖浏览器默认值，如下所示:

html {font-size:16px;}