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).
I would like to have a uniform font-size everywhere. This is not the case right now and I do not know where the bug is.
For example the font size here in page 1 is different from that in page 2. (I do not need to target IE8 and lower. My target audience is Mozilla Firefox, Opera, Chrome, and Safari.)
By the way, what is main copy?
Open up style.css in any text editor.
Find all font-size rules.
Delete them all.
Create a new rule: body { font-size: size; } where size is the value you want.
font-variant: small-caps;
font-size: 12px;
Firefox:
Capital letters: 12px
Lowercase letters: 10px
Chrome:
Capital letters: 12px
Lowercase letters: 8px
How to harmonize that without using JavaScript?
Webkit browsers display small-caps smaller than other browsers so.. You can use CSS media queries to easily sniff out webkit browsers like Chrome and Safari. Try something like this:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.some-element-using-small-caps {
font-size: .85em
}
}
You can target the browsers individually by using css hacks like this:
#-moz-document url-prefix() {
//firefox specific css here
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
//chrome specific css here - this will also hit other webkit browsers like safari tho
}
A nicer way however in my opinion involves a tiny bit of javascript that detects the browser and sets a class on the html element and then you can use that class as a base for targeting the individual browsers.
in the end it would look something like this:
<html class="firefox">
...
</html>
.firefox .rulename {
//firefox specific css here
}
and of course the same for chrome and whatever else browser
I am having a similar issue with a much weirder issue between Safari on iPad vs Safari on Desktops, showing a different scale for small-caps at 16px. For some reason small-caps is a bigger size on iPads, kinda matching that of Firefox.
Adjusting the font size or letter-spacing a half pixel less or so, can mitigate the issue without further additional hack. By essentially finding a tiny middle adjustment which trigger on one browser but not on another, to try and get as close as possible.
What I have observed for Firefox and IE, is that fonts tend to scale with many more intermediate sizes than that of Webkit. For example, in IE and Firefox, 15.6px is a tiny bit bigger or use more tracking to adjust, than that of 15.5px, and so is 15.7px, 15.8px etc. With a difference for nearly every 0.1 pixel. Whereas in Safari the difference is only perceived for every 0.4px or so.
For my small-caps case here which created an overflow issue, I used 15.5px, which is barely different from 16px on Safari (Desktop), yet bring down the small-caps size for IE and Firefox as close as possible to Safari's.
I'm stumped here. I've got maybe 2-3 pixel difference with my header text (img) when displayed in FF vs an webkit browser. Not a whole lot going on in this page. Both the CSS and HTML validates. Doesn't appear to be and text zoom related. What am I missing?
www.caribouhouse.com
There's a hack for overwriting a css rule in firefox 3 , you can use this :
.foo{}/* other browsers */
.foo, x:-moz-any-link { } /* FireFox 2 */
html>/**/body .foo, x:-moz-any-link, x:default { } /* Only FireFox 3 */
FF and WebKit use different methods/algorithms to render text. Even WebKit by itself uses more than one method to render text, depending. Because of kerning etc it's normal to see different implementations have a difference of a few pixels when rendering text, even when the text is the same font in both cases.
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.