html - Chrome 字体大小加载较大然后减小

Question

我在网站的 CSS 中使用 em 单位。当我在 Chrome 中加载网站页面时，所有文本都会以非常大的字体大小加载。如果我调整浏览器窗口大小或加载开发人员控制台，字体大小将恢复为“正确”大小。有时，如果我浏览网站上的页面，它会执行相同的操作或行为不稳定(从大开始，有时从正常大小开始)。

我无法在 Safari 或 Firefox 中复制此内容，因此认为这一定是 Chrome 解释我的 CSS 或 em 单位的方式存在问题。

对于为什么会发生这种情况有什么想法吗？如果我删除所有 em 单位并使用 px 那么它工作正常(这可能是一个解决方案，但不能帮助我理解 em)。

(使用:Chrome 32、Macbook Air、操作系统 10.8.5、自定义 Wordpress 主题)。

一些CSS:

body {
    margin: 0 auto;
    color: #404040;
    font-family: sans-serif;
    font-size: 1.6rem; 
    line-height: 1.5;
    padding: 1em; }

(如果我在这里使用 font-size:16px ，它会正常工作，但是 em/rem 有什么意义)

Answer 1

其实我也遇到了和你一样的问题。我最近开始使用 rem 而不是 em，它要好得多，因为您不必担心嵌套元素(例如列表项)、乘以值。但是，我注意到字体加载太大，然后调整大小。

在我的 CSS 中，我最初使用以下方法重置了字体:

html { 字体大小:62.5%； }

您可能已经知道原因，但这只是意味着 1em 等于 10px。然后我在正文中添加了 font-size: 1.4rem 将基本字体大小设置为 14px。

要解决您提到的问题:

尝试将 html 字体大小设置为 10px，而不是百分比值，然后从那时起使用 rem。无论如何，似乎对我有用。