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:
disable the auto adjustment by following style.
* {
-webkit-text-size-adjust: none;
}
-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*/
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.
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.
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;
}
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?
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.
what happens if you make the < P > tag a < SPAN > tag?
is it possible you have defined your < p > tag somewhere along?
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 doesn't let you set the minimum size less than 6 point.
And text is legible A LOT smaller than that on Retina displays.
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:
(source: kissyour.net)
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.
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.
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>
<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>
you can use
body {
font-size:125%;
}
to set 0.5em=10px.
Related
i am noticing in my web app that the same input form font size, currently set to 17px, reads smaller on chrome compared to firefox. i've attached a screenshot.
is there a more elegant method to resolve this than simply using
/*chrome*/
input {
font-size:17px;
}
/*firefox*/
#-moz-document url-prefix() {
input {
font-size:15px;/*reduce font size to match what is seen in chrome*/
}
}
I don't know what font you're using (or platform (Mac vs Win makes a difference too) , but some browsers render fonts using CLEARTYPE subpixel rendering, some use QUARTZ subpixel rendering (making appearance differ), then others use standard antialias-ing.
A good way around this is to use font-smoothing css in your html or body css:
html {
font-family: /*yourfont*/;
-webkit-font-smoothing: antialiased;
}
Read more about it and see more examples on Max Voltar's website
Also note that using em is preferable to using px for measuring your font. Large font sizes are especially harmed by pixelation if you don't use font smoothing, so in order to keep accessible text especially, it's better to use ems (this way you can still use large type sizes).
One of the weirdest CSS issues I've seen. The .product-bottom and .product-title classes have the font-family: Roboto. This displays fine in IE and Chrome. Inspecting the elements in Firefox, the font is apparently used on the element and is successfully used throughout the site in other elements.
Editing the font-family attributes when inspecting the element has no affect on it. The computed css values show !important is not used. When used in the inspector on font-family, it has no affect. There are no jQuery or CSS errors, though there are plenty of CSS warnings.
The site is [removed after fix].
Screenshot of the font issue in FF. Problem text is: "Grey Hair Color Body Wave Human Hair Weave"
Disable
.product-title {
text-transform: full-width;
}
and it looks fine. The full-width value is only experimental and mainly supposed to be used with square letters like in Chinese.
Replease this css:
.product-title {
text-transform: full-width;
}
with this:
.product-title {
text-transform: capitalize;
}
I'm using this CSS to style a div:
#mainSection .mainArticle .text {
width: 600px;
margin-top: 0px;
margin-left: 20px;
line-height: 26px;
color: white;
float: left;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
}
The image below shows the difference between Safari and Chrome:
I can't tell why it's this different. The font looks 'bolder' in Chrome, yet each character takes an tiny bigger length in Safari, meaning it sticks on average less chars on each line. Because the div box size is fixed length, the result is that the text ends too close to the bottom border.
I can't have variable length boxes. You can see the site here (go to MENTORING section):
enter link description here
Is there a convenient way around this problem? I know the font engine is different for each browser...
i think it is because the browser size is not same for all the browsers, and you have defined your CSS in terms of pixels., try to convert from pixels(px) to percentage(%) or em/rem values.
i hope this helps.
Safari renders open sans bolder than in chrome so you would need to apply a lighter font weight for safari Open Sans Google Web Fonts Rendering in Chrome
The reason is that whereas other browsers render the font at the exact size specified, Safari renders fonts in a series of steps.
I assume that the Apple team feels that fonts rendered at 10.3px look better than fonts that are rendered at 10.0px. (made up values).
The consequence is that you get different results between Safari and other browsers.
The easiest way to see this in action is to define a font size as a percentage, then slowly resize the window:
Test page at svija.love
In other browsers, the font will resize smoothly with the window. In Safari, the font size will increase in a series of jumps.
I am looking for a workaround for this (help, somebody!) because this behavior is screwing up my layouts and making it look like I have spelling errors at Ozake.com.
[update fall 2021] I wrote a program that combines the various text blocks into a single line, eliminating spacing problems. See svija.love for more information.
Well I've had a fun-filled 24 hours. Since asking this question yesterday: http://tinyurl.com/nkoqxfg I've been trying to isolate the problem, and finally I've narrowed it down to the following:
Modernizr is incorrectly applying a class of fontface to the HTML element in IE8.
Here is my site, with everything else stripped away: http://tinyurl.com/ose6pj8
Please take a look at the source code. Notice the last two CSS rules:
nav li a {
color: #FFF;
font-size: 4px;
}
.fontface nav li a {
font-family: 'Qwigley';
font-size: 30px;
line-height: 56px;
}
In any modern browser that supports #font-face, you should see the menu styled with Google font's 'Qwigly' script, and the correct font-size of 30px. In IE8 and any browser that doesn't support #font-face, you would expect to see a tiny font-size of 4px. (Modernizr in this case should apply a no-fontface class to the HTML element)
However, this is not the case. Mordernizr is incorrectly applying the fontface class, and as a result I'm getting huge 30px Arial text. Just checked, and the same problem is occurring with IE7.
Why?
in IE8 and any browser that doesn't support #font-face, you would expect to see a tiny font-size of 4px. (Modernizr in this case should apply a no-fontface class to the HTML element)
IE 8 does support #font-face – so expecting Modernizer to not set that class is just where you are going wrong here.
The caveat is that IE < 9 only supports fonts in EOT format – so see to it that you embed that version in your font embedding as well;
Or use a CSS selector that applies your custom font only if the lt-ie9 class that you set for your html element via conditional comments is not present, something like
html:not(.lt-ie9) .fontface nav li a { /* … */ }
(IE only supports the :not() selector from v9 on anyway.)
Is it possible to override font boosting in mobile chrome?
I searched the internet before ~including stackoverflow~.
I found that some people say it's impossible, and I also found meta tag that helped the text but also decreased the area of the text... which is not good..
Will appreciate your help..
adding following line to my reset.css worked for me
html * {max-height:1000000px;}
There is no real possibility for disabling font boosting. There may be some hacks, but they are meant for something different and, in fact, do something different.
Try text-size-adjust:
html {
text-size-adjust: none;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
}
It looks like there are a few people that have methods for making it work.
Add some CSS rules or give parent element width and height.
It is a webkit official bug. You can check on Webkit official site
You have to target only specific element where you have to override font boosting rather than targeting unwanted elements. i.e.
p {
max-height: 999999px;
}
Matt and Kundan Sankhe answer are the best solution at the moment.
.element { max-height: 999999px; }
If the problem still occur try add this inside the head tag:-
<meta name="viewport" content="width=device-width, initial-scale=1">
But bear in mind that this can cause problem to image tag or image background-size tag.
Android Chrome only applies font boosting to elements with dynamic height. As soon as you specify a height,max-height or line-height, font boosting is not applied. But you should be careful of the inline element like span whose height or max-height property is invalid. In that case you can set the display to inline-block as the below code or other box types whose height can be setted.
span {
font-size:12px;
line-height:12px;
display:inline-block;
}
For desktops, and likely mobile (haven't tested mobile), you can disable font size boosting in Chrome and FF by setting a base font size on the HTML element. For example:
html {
font-size: 16px;
}
This is less hacky than max-height. But, still dirty from an accessibility standpoint.
You can also use jQuery to set this if you have to.