Bootstrap 4 - Ubuntu Chrome 和 Firefox 中不同的渲染字体大小答案

【问题标题】：Bootstrap 4 - wildly different rendered font sizes in Ubuntu Chrome and FirefoxBootstrap 4 - Ubuntu Chrome 和 Firefox 中不同的渲染字体大小
【发布时间】：2019-06-09 01:22:48
【问题描述】：

我正在 Ubuntu 上开发一个网站。当我在 Firefox 中查看它时，它比我在 Chrome 中查看时要小得多。截图：

两种浏览器的默认字体都设置为 DejaVu Serif，16 像素。我没有弄乱 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 文件，但问题仍然存在。

【问题讨论】：

请发布您的 css，以便我们帮助您回答这个问题。
它是引导程序，所以...我的意思是，我不想轻率，但我使用的是引导程序 4.1。我没有更改它的任何基本变量/设置。 body 元素的字体大小只需在 Boostrap _reboot.scss 文件中设置为 1rem。我不擅长 CSS，所以我让框架为我做繁重的工作。这就是为什么这很奇怪......因为我没有使用默认大小设置，我认为在不同的浏览器中应该看起来相同。所以，我想看看：github.com/twbs/bootstrap/blob/v4.1.3/scss/_reboot.scss
我的 CSS 只是添加了主题颜色，并且在项目中包含了 FontAwesome 的字形，两者都不会影响大小，因此与问题无关
绝对不要假设所有浏览器看起来都一样。 Chrome 以自己的方式做事，在 PC 上，Chrome 在正确渲染字体方面可能是最差的。很多这些 CSS 变化我们基本上不得不放弃而不是对抗。我会在这些浏览器中尝试 Bootstrap 站点，看看它们是否相同，如果是，也许你有其他影响渲染的样式。
我同意这种说法。欢迎来到浏览器大战。 :)

标签： html css twitter-bootstrap bootstrap-4 cross-browser

【解决方案1】：

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

html {font-size:16px;}

【讨论】：

不幸的是，对我的 CSS 进行的更改对浏览器呈现我的网站的方式没有任何影响。尺寸差异仍然存在
2 年后，这解决了一个引导应用程序的问题，其中字体大小为 16 位于正文上。将其移至 html 解决了问题。

【解决方案2】：

我认为，您需要为您的 CSS 代码添加前缀。因为，所有浏览器都有一个前缀代码，所以：-webkit、-o、-moz 等。转到Link 并通过您的 css 左列并从右列复制 css：例如：如果它解决了您的问题，请将其标记为答案 :)

【讨论】：