css - Chrome 会在缩小时增加字体大小

Question

我有以下代码:

CSS

#container{
    font-size: 0.625em;
}

#div1 {
    width: 200px;
    height: 200px;
    background-color: green;
}

#div2 {
    width: 20em;
    height: 20em;
    background-color: red;
}

HTML

<div id="container">
    <div id="div1">
    This is a test message.This is a test message.This is a test message.This is a test message.
    </div>
    <div id="div2">
        This is a test message.This is a test message.This is a test message.This is a test message.
    </div>
</div>

Chrome 版本

Version 35.0.1916.153 m

当你在 Chrome 中缩放到 50% 或更小时，两个 div 的大小会变得不同。如果你在开发工具中检查字体大小，你会意识到 Chrome 自动增加了文档的字体大小。

谁能告诉我为什么会这样？我该如何预防？

我正在研究 em 和 px 的区别，所以将 #div2 的宽度更改为 200px 是 Not Acceptable 。

JsFiddle Link

更新了内容和来源。

感谢您的帮助。

2014 年 6 月 16 日更新

发现了一些有趣的东西，想在这里与大家分享。

如果您曾在 Chrome 中触及“高级字体设置”，或使用默认版本(非中文或日文):

1. 永远不允许将 font-size 设置为小于 6px 的某个数字(在中文或日文版本中为 12px)。

2. 1em 永远不会小于 6px(12px)，当您用“em”测量“高度”之类的东西时。

3. 如果将文本设置为 6 像素，并将缩放比例设置为 50%，您可能希望看到呈现为 3 像素(变为一半)的文本。但是 chrome 会将文本设置为 12px，这可能会破坏您的布局。

感谢 Dawar Husain。他帮助我实现了最小字体大小。

Answer 1

看，第一个 div 使用 px，第二个使用 em。

Chrome 有一个最小字体大小，小于它的字体将仅显示为该字体大小。 (查看您的 Chrome 设置)

现在，使用带有 px 的 div，框会继续并在缩放 33%(或 25% 或 50%)时变得更小，但使用 em，当达到最小字体大小时，框保持相同大小。看

em 在像 Chrome 这样通过缩放字体大小实现缩放的浏览器上很有用。因此，如果您使用 em 调整所有元素的大小，它们会相应地缩放。em 确保整个内容按原样显示，即使 div 的大小发生变化(在缩放时)。希望你得到你的答案:)

编辑

在 IE10 中，设置中没有像 GC35 中那样的最小字体大小。所以 em px 彼此呈现相似。