Font-size <12px doesn't have effect in Google Chrome

user_64873 0
Viewed 56812

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: https://i178.photobucket.com/albums/w258/neodeep2001/chrome-font-size-diff.jpg

google-chrome css
16 Answers

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.

user_1174420

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;
}
user_2811180

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?

eyelidlessness_179640

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
(source: kissyour.net)

user_2402390

what happens if you make the < P > tag a < SPAN > tag?

is it possible you have defined your < p > tag somewhere along?

user_2811180

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)

user_2178500

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>
user_733580

Chrome and Firefox now allow a minimum font size setting of zero. Chrome 73 had downstream problems with this, and since then Chrome changed their policy and user interface for this setting. I don't know the history on Firefox, and I don't know the state of this setting on Safari or other browsers.

user_49413560

You can use css property zoom (https://developer.mozilla.org/en-US/docs/Web/CSS/zoom)

By setting zoom property equals to 0.25
all elements will be looked 4 times smaller,
so 12px font text will be looked like 3px font text.

.text {
    zoom: 0.25;
    font-size: 24px;
}

text will be looked like font-size: 6px; text.

But this property isn't supported by firefox.

user_115691420 
<html>

<head>
<style>
    #text {
        transform-origin: top left;
        background: #aed5ff;
    }
</style>
<script>
  window.addEventListener('load', function() {
    var node = document.getElementById('text');
    var fontSize = node.style.fontSize.replace(/[\D]+$/, '');
    if (+fontSize <= 12) {
      node.style.fontSize = '12px';
      node.style.transform = `scale(${fontSize / 12})`
    }
  });
</script>
</head>

<body>
<p id='text' style='font-size:10px'>test 10px</p>
<p style='font-size:12px'>test 12px</p>
</body>
</html>
user_91475560
Related