可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
Elements with css font-size <12px doesn't have effect in Google Chrome - remains font-size 12px.
What should I do?
My Google Chrome browser uses default settings. My version is 4.0.249.89. I am using Windows XP.
You can paste the following code to your Google Chrome to test it:
<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:
回答1:
disable the auto adjustment by following style.
* { -webkit-text-size-adjust: none; }
回答2:
-webkit-text-size-adjust is no longer working after Chrome 27.
Try using transform to refuce font-size forcely.
font-size:12px; transform: scale(0.833);/*10/12=0.833, font-size:10px*/
回答3:
According to http://www.google.com/support/forum/p/Chrome/thread?tid=389f306a52817110&hl=en Chrome 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?:
"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.
回答4:
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
Edit: Latest Chrome (stable) renders this this way: Rendering in chrome http://h.kissyour.net/so/less12.png
回答5:
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; }
回答6:
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?
回答7:
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.
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.
回答8:
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'.
Interestingly font-size: 0 still works even if the minimum font size is set to 9px in your browser preferences.
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;
-moz-text-size-adjust: none,
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
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.
回答9:
what happens if you make the < P > tag a < SPAN > tag?
is it possible you have defined your < p > tag somewhere along?
回答10:
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)
回答11:
Have you tried putting an "!important" clause behind the font styles? This would override everything else. At least then you would know where to look for the problem. Like this:
<p style="font-size:6px !important;">test 6px</p>
回答12:
Chrome doesn't let you set the minimum size less than 6 point. And text is legible A LOT smaller than that on Retina displays.
回答13:
you can use
to set 0.5em=10px.
