CSS 字体大小 <12px 在 Google Chrome 中无效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2295095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font-size <12px doesn't have effect in Google Chrome
提问by Billy
Elements with css font-size <12px doesn't have effect in Google Chrome - remains font-size 12px.
css font-size <12px 的元素在谷歌浏览器中不起作用 - 保持字体大小 12px。
What should I do?
我该怎么办？
My Google Chrome browser uses default settings. My version is 4.0.249.89. I am using Windows XP.
我的 Google Chrome 浏览器使用默认设置。我的版本是 4.0.249.89。我使用的是 Windows XP。
You can paste the following code to your Google Chrome to test it:
您可以将以下代码粘贴到您的 Google Chrome 进行测试：
<html>
<body>
<p style="font-size:6px;">test 6px</p>
<p style="font-size:7px;">test 7px</p>
<p style="font-size:8px;">test 8px</p>
<p style="font-size:9px;">test 9px</p>
<p style="font-size:10px;">test 10px</p>
<p style="font-size:11px;">test 11px</p>
<p style="font-size:12px;">test 12px</p>
<p style="font-size:13px;">test 13px</p>
<p style="font-size:14px;">test 14px</p>
<p style="font-size:15px;">test 15px</p>
<p style="font-size:16px;">test 16px</p>
</body>
</html>
Results from different browser:
不同浏览器的结果：
采纳答案by Digi3 Colin
disable the auto adjustment by following style.
按照样式禁用自动调整。
* {
-webkit-text-size-adjust: none;
}
回答by Jaskey
-webkit-text-size-adjustis no longer working after Chrome 27.
-webkit-text-size-adjust在 Chrome 27 之后不再工作。
Try using transformto refuce font-size forcely.
尝试使用transform强制拒绝字体大小。
font-size:12px;
transform: scale(0.833);/*10/12=0.833, font-size:10px*/
回答by Arne Roomann-Kurrik
According to http://www.google.com/support/forum/p/Chrome/thread?tid=389f306a52817110&hl=enChrome supports a minimum font size. If you open "Documents and Settings\User_Name\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences"in a text editor, do you see something like the following?:
根据http://www.google.com/support/forum/p/Chrome/thread?tid=389f306a52817110&hl=enChrome 支持最小字体大小。如果您"Documents and Settings\User_Name\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences"在文本编辑器中打开，您是否看到类似以下内容？：
"webkit": {
"webprefs": {
"default_fixed_font_size": 11,
"default_font_size": 12,
"fixed_font_family": "Bitstream Vera Sans Mono",
"minimum_font_size": 12,
"minimum_logical_font_size": 12,
"sansserif_font_family": "Times New Roman",
"serif_font_family": "Arial",
"standard_font_is_serif": false,
"text_areas_are_resizable": true
}
}
Closing Chrome, changing the minimum font size, and restarting Chrome may help.
关闭 Chrome、更改最小字体大小并重新启动 Chrome 可能会有所帮助。
回答by user1794295
Chrome has a minimum font size setting. Mine was set to 11px (by default) so I had to change it to view smaller font sizes.
Chrome 具有最小字体大小设置。我的设置为 11px（默认情况下），所以我不得不更改它以查看较小的字体大小。
To change the minimum font size in Chrome go to: settings > advanced settings > web content > font size > customise fonts > scroll down to the bottom and you will see the 'minimum font size' slider.
要更改 Chrome 中的最小字体大小，请转到：设置 > 高级设置 > 网络内容 > 字体大小 > 自定义字体 > 向下滚动到底部，您将看到“最小字体大小”滑块。
回答by Daniel
Same for safari. I guess this is set to 9px for accessibility reasons. The trick is to not rely on making your fonts that small, so that you are blowing them up in css rather than reducing them. This is of particular relevance if creating your own font using something like icnmoon. So, here it is best to reduce the glyphs sizes in the font, so that you are setting them quite large in your css and you are avoiding setting them to below 9px if the user 'zooms out'.
Safari 也是一样。我想这是出于可访问性原因设置为 9px。诀窍是不要依赖于让你的字体那么小，这样你就可以在 css 中炸毁它们而不是减少它们。如果使用 icnmoon 之类的东西创建自己的字体，这尤其重要。因此，这里最好减少字体中的字形大小，以便在 css 中将它们设置得相当大，并且如果用户“缩小”，则避免将它们设置为低于 9px。
Interestingly font-size: 0 still works even if the minimum font size is set to 9px in your browser preferences.
有趣的是，即使在浏览器首选项中将最小字体大小设置为 9px， font-size: 0 仍然有效。
With regards tablets and smartphone and other devices, it may be possible to use the following to avoid automatic text size adjustments using the following:
对于平板电脑、智能手机和其他设备，可以使用以下方法来避免使用以下方法自动调整文本大小：
-webkit-text-size-adjust: none;
-webkit-text-size-adjust: 无；
-moz-text-size-adjust: none,
-moz-text-size-adjust: 无,
-webkit-text-size-adjust: none;
-webkit-text-size-adjust: 无；
-ms-text-size-adjust: none;
-ms-text-size-adjust：无；
font-size-adjust: none;
字体大小调整：无；
This may actually break the accessibility of your websites on these devices but as far as I know there is no way to adjust your browser text size as it stands on these devices. They only seem to be adjusted automatically, depending on the situation which can be a bit of a mystery. These commands may prevent that, but i think the default minimum font that is set in your browser preferences may override that setting anyway, at least in some browsers.
这实际上可能会破坏您网站在这些设备上的可访问性，但据我所知，在这些设备上无法调整浏览器文本大小。它们似乎只能自动调整，具体取决于可能有点神秘的情况。这些命令可能会阻止这种情况，但我认为在您的浏览器首选项中设置的默认最小字体无论如何可能会覆盖该设置，至少在某些浏览器中是这样。
回答by eyelidlessness
Is there a minimum font size preference? Is it set to 12px? Is page/text zoom enabled? Do you have any kind of Chrome plugins that alter page contents?
是否有最小字体大小偏好？设置为12px吗？是否启用了页面/文本缩放？你有任何改变页面内容的 Chrome 插件吗？
回答by Paul
this should not be correct, you probably have an element overwriting your current given attribute.
这不应该是正确的，您可能有一个元素覆盖了您当前的给定属性。
like this:
像这样：
body {
font-size:10px;
}
#content {
font-size:12px;
}
回答by Adam Kiss
It works for me.
这个对我有用。
Try to:
尝试：
- use webdesigner tools, to check what css affects your element
- post html and css aswell, so we can maybe figure out more
- 使用 webdesigner 工具，检查哪些 css 会影响您的元素
- 发布 html 和 css 以及，所以我们可以找出更多
Edit:
Latest Chrome (stable) renders this this way:
(source: kissyour.net)
编辑：最新的 Chrome（稳定版）以这种方式呈现：（
来源：kisyour.net）
回答by Paul
what happens if you make the < P > tag a < SPAN > tag?
如果将 < P > 标签设为 < SPAN > 标签会发生什么？
is it possible you have defined your < p > tag somewhere along?
你有没有可能在某个地方定义了你的 < p > 标签？
回答by James B
It works for me in Chrome 4.0.249.78 (36714) , could you be viewing a cached copy?....Try emptying your page cache (I've found chrome very fond of its cache)
它在 Chrome 4.0.249.78 (36714) 中对我有用，您可以查看缓存副本吗？....尝试清空页面缓存（我发现 chrome 非常喜欢它的缓存）
