Chrome字体大小加载大，然后减少

我在我的网站的CSS中使用em单元。当我在Chrome中加载网站页面时，所有文本都将以非常大的字体大小加载。如果我调整浏览器窗口大小或加载开发者控制台，则字体大小将恢复为“正确”大小。有时，如果我在网站上浏览网页，它会执行相同的操作或表现不规律（从大开始，有时从正常大小开始）。Chrome字体大小加载大，然后减少

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

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

（使用：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点）

来源

2014-02-09 Josh

请分享您的样式表。 –

新增正文{...} css – Josh

您可以在https://code.google.com/p/chromium/issues/list上提交错误。 https://groups.google.com/forum/?hl=zh-CN#!forum/google-chrome-developer-tools也有一个非常有活力的Google集团 –

需要更多的信息。一个实时的网址将不胜感激。

无法重现只使用此代码：

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

http://jsfiddle.net/wZD4n/

来源

2014-02-09 10:38:44 Znuff

CSS3引入了一些新的单位，包括REM单元，这对于 “根EM” 代表。

em单位是相对于父级的字体大小，这会导致配合问题。 rem单位是相对于根元素或html元素的。这意味着我们可以在html元素上定义单个字体大小，并将所有rem单位定义为其中的百分比。

您可以尝试font-size: 1.6em; /* EM not REM */但无论如何，它可能无法工作，只要1em等于当前的字体大小。

您可以改为使用px，或者在body中设置px，然后使用em。

来源

2014-02-09 10:43:14

我和你有同样的问题。我最近开始使用rem而不是em，因为您不必担心嵌套元素（例如列表项）乘以值，所以它更好。但是，我注意到字体加载太大，然后调整大小。

在我的CSS，我本来重新使用该字体：

html { font-size: 62.5%; }

你可能已经知道为什么，但这只是意味着1EM就等于10px的。然后在主体中有font-size: 1.4rem将基本字体大小设置为14px。

要解决你所提到的问题：

尝试设置你的HTML字体大小10px的，而不是百分比值，然后用REM从那时起。无论如何，似乎是为我工作。

来源

2015-05-29 09:48:56 gracehcoote

Chrome字体大小加载大，然后减少

回答

相关问题