I'm using Helvetica on this site, viewing on OSX right now. The font rendered in Chrome (left) have more space on the top versus Firefox. This creates an ugly vertical misalignment.
From what I found this is a font engine rendering difference between Firefox and Chrome. Just wondering if there are ways to mitigate this or do I have to change font?
Thanks.
Related
I'm working on a website and Firefox is displaying it's font extremely large. Chrome and Safari are displaying normal font size. I've found that you can change font display by typing
about:config
in the firefox address bar and changing the
layout.css.devPixelsPerPx
value to 1. Although this might work on some systems, I don't want my user to need to do this.
How can I make sure that the font is displayed correctly? I've tried adjusting CSS with
-moz-font-size
and variants but it doesn't work. Is there a specific syntax for this?
I am working on a website and I have been having trouble getting the whole thing to zoom out to about 80% on firefox.
It zooms to the perfect size on internet explorer and google chrome but since I have to use -moz-transform:scale() rather than a zoom function, it not only messes with the spacing but it also removes my fixed footer.
Currently the following options are working to get it to the right size on chrome and IE but I am wondering if there is another property for firefox which I can use to zoom. Thanks for all your help!
I've been working on a website and I can't get to make the text look anti-aliased when it's size is small on all the browsers.
I Can see the best results in Safari and Firefox, however, in IE and Chrome the text is anti-aliased in a bad way that it looks thicker than needed.
I've tried all the anti-aliasing solutions I have found but none fits my need.
I have an issue with Chrome mobile where some text is rendered in bigger font size than it is in CSS. I checked in developer tool and find that those text have inherit the correct font size, but still rendered 5px bigger in the computed style.
I find this post Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
but -webkit-text-size-adjust doesn't work for me here.
I have checked in different mobile browsers including Dolphin, Opera Mobile and Safari, all rendered the text correctly except Chrome mobile.
Update: Solved, it caused by the setting of Chrome Mobile to render the text bigger. I don't think this is something we can block in the setting.
The issue is that between Chrome Mobile 18 and Chrome Mobile 25 the rendering of fonts changed. It appears that the Chrome scaling feature at 100% is actually up scaling the fonts. We had to set the Chrome scaling feature down to 85% to get the fonts to not upscale.
Also it appears that if we touch anything on the web page the fonts on the page re-adjust to the proper size. This shifting between scales is VERY concerning as it affects applications is an extremely negative way. Especially if you are attempting anything that needs to ensure any psychometric validity.
I've been playing with CSS3 transforms- rotations- and embedded fonts.
Some fonts completely disappear in Chrome when I apply a rotation.
Does anyone know why chrome blows this up?
What makes a font susceptible to this behavior?
Screenshot
So maybe y'all don't think I'm crazy- The text only shows up (kind of) after I try selecting it.
You weren't including the font correctly, try it like this:
http://jsfiddle.net/DFmtJ/1/
(tested on windows XP, Chrome 11.0.696.68 and 13.0.782.220)
------Edit--------
Cried wolf, the font that was being loaded was another one :/, though it is working for me on Chrome as in your first demo.