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字體大小加載大，然後減少

回答

相關問題