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

Question

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

我无法在 Safari 或 Firefox 中复制它，所以认为这一定是 Chrome 解释我的 CSS 或我的 em 单元的方式的问题。

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

(使用:Chrome 32、Macbook Air、OS 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。无论如何，似乎对我有用。