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?
Related
I need CSS help.
In this site header the site name "India Consumer Complaints Forum" is show in small font in IE 9 while it works fine in other browsers. I've tried this suggestion from a Mybb expert too but it does not work. I've tried other options like using 2.5em for font-size or moving font-size into #logotext id too but IE seems to be immune to it.
How can I show it in bigger font?
Your site link shows big in every browser, checked back to IE7. No issues found. You might have fixed it.
I built a website that works great on Firefox, IE, and Chrome. Client goes to a tradeshow and realizes the website menu went bonkers in their iPad.
broken menu http://www.glassdoctordenvermetro.com/wp-content/themes/GDDenverTheme/images/photo.JPG
I tried a website that lets you preview your design by simulating it in case you don't have an iPad (like me). But the problem is it looks fine:
http://ipadpreview.com/previewer?url=http%3A%2F%2Fglassdoctordenvermetro.com%2F
What would suggest I do to figure this out? Is it a problem with the font being different on every browser perhaps? The width of the tab changes based on the menu font and wording but again, it looks fine on all other browsers I tested.
Thank you
Opening it an iPad simulator shows that the font is a much wider font and there's also greater letter spacing. You should specify more options in the font-family tag to have another more condensed font that is available on iOS. You could also bring the font-size down on iOS. The big issue with the testing site you're using is that it's still outputting HTML, the only trustworthy type of site like that would have to generate a screenshot image to ensure consistency.
Here's some fonts to help: http://iosfonts.com/
And 11px works with the existing font.
Alternately, removing the uppercase transform makes it fit.
I've noticed some strange behavior with both Chrome and Safari on my Mac:
Mountain Lion
Safari 6.0 (8536.25)
Chrome 21.0.1180.89
The page is a simple fixed div with some text in it, I added a second div that does a simple CSS translation over 5 seconds so you can easily see the difference. My web app is using CSS transitions to show and hide portions, and while it was doing this large portions of the screen seemed to shift.
I've placed example code and a .mov file out on a server so hopefully you will see the same issue:
http://physicaltable.com/index.html and http://physicaltable.com/CSS_JIGGLE_TEST_2.mov
The strange bolding doesn't occur in Chrome on Windows 7, nor does it happen on the iPad 2 (v5.1.1)
Has anyone else seen this type of issue?
I realize this isn't much of an answer, but I've found that it's mostly because of the rendering of the elements. If the element needs to use hardware or any other type of graphics rendering, it basically takes an image of the text, adjusts it, then rerenders the text (if it can).
The "taking a picture" is where the boldness is lost, since the browser/display/something is adding the flair that makes the text look good. Of course it doesn't look that good, but that's just me.
I've noticed with different colors other than all white/black, it can behave differently. I'm hoping things will get smoothed out as browsers and rendering advances.
I found solution for this bug
its enough simply force your browser to rerender that at moment move is stopped
E.g.
$("your_element_selector").css("color", "color");
where color can be even same color as your text has
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.