Chrome会在缩小时增加字体大小 [英] Chrome will increase the font size when zooming out

问题描述

我有以下代码：

CSS

 ＃容器{
 font-size：0.625em; 
} 
 
＃div1 {
 width：200px; 
 height：200px; 
 background-color：green; 
} 
 
＃div2 {
 width：20em; 
身高：20em; 
背景颜色：红色; 
 
  

HTML

 < div id =container> 
< div id =div1> 
这是一条测试消息。这是一条测试消息。这是一条测试消息。这是一条测试消息。 
< / div> 
< div id =div2> 
这是一条测试消息。这是一条测试消息。这是一条测试消息。这是一条测试消息。 
< / div> 
< / div> 
  

Chrome版本

 版本35.0.1916.153 m 
  

当您在Chrome中缩放至50％或更小时，两个div的大小会有所不同。
如果您在开发工具中检查字体大小，您将意识到
Chrome会自动增加文档的字体大小。

可以有人告诉我为什么会发生这种情况？
我怎么能防止它？

我正在做一些关于em和px的差异的研究，所以将＃div2的宽度改为200px不是

JsFiddle链接

更新了内容和来源。

感谢您的帮助。

2014年6月16日更新

找到一些有趣的东西，想和大家分享一下。

如果您曾在Chrome中使用过高级字体设置，或者使用了默认版本（非中文或日文）：

1. 绝不允许将font-size设置为小于6px的数字（中文版或日文版将为12px）。




2. 1em将永远不会小于6px（12px），当您使用em来衡量诸如height之类的内容时。




3. 如果您将文本设置为6像素，并缩放至50％，则可以预计t看到像3px呈现的文本（成为一半）。但是文本会被chrome设置为12px，并且可能会破坏你的布局。感谢Dawar Husain。
   

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

解决方案

请参阅第一个div使用px，第二个使用em。

Chrome的最小字体大小和字体小于它仅显示为该字体大小的字体。 （请参阅您的Chrome设置）

现在，将div与 px 一起使用，该框会变大， 33％（或25％或50％），但使用 em 时，当达到最小字体大小时，该框保持相同大小。见

对于通过缩放字体大小来实现缩放比例的浏览器很有用。所以如果你用em来确定所有元素的大小，它们就会相应地缩放
em 确保即使 div 的大小发生变化（缩放时），也会显示整个内容。希望你得到你的答案）

编辑

在IE10中，设置中没有最小字体大小GC35。所以 em px 呈现相似的结果。

I have the following code :

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

Version 35.0.1916.153 m

When you zoom to 50% or smaller in Chrome, the size of the two divs will become different. If your check the font-size in dev tool, your will realize that Chrome automatically increased the font-size of the document.

Can anybody tell me why this happens? And how could I prevent it?

I am doing some research on the difference of em and px, so change the width of #div2 to 200px is not acceptable.

JsFiddle Link

Updated the content and source.

Thank you for your help.

Updated June 16th, 2014

Found something interesting and wanna share with you guys here.

If you had ever touched the "Advanced font settings" in Chrome, or using an default version(not Chinese or Japanese):

1. you will never be allowed to set font-size to some number smaller than 6px(in Chinese or Japanese version it will be 12px).

2. 1em will never go smaller than 6px(12px), when you measure something like "height" with "em".

3. if you set a text to 6px, and zoom to 50%, you may expect to see the text rendered like 3px(become to half). But the text will be set to 12px by chrome, and may break your layout.

Thanks to Dawar Husain. He helps me realize the minimum font size thing.

解决方案

See, you used px for the first div and em for the second.

Chrome has a minimum font size and fonts smaller than it will be displayed as that font size only. (see your Chrome Settings)

Now, using div with px, the box goes on and becomes even smaller on zooming at 33% (or 25% or 50%) but using em, the box remains the same size when the minimum font-size has been reached. see

em is useful on browsers which implement zooming by scaling the font size like Chrome. So if you size all your elements using em they scale accordingly. em makes sure that the whole content is displayed as it is even if the size of div changes (on zooming). Hope you got your answer :)

EDIT

In IE10, there's no minimum font size in settings as in GC35. So the em px render like each other.

这篇关于Chrome会在缩小时增加字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！