(Sorry for my poor English)
Yesterday, I encountered a problem when using #font-face with a really large font-size (200px): one of my div rendered differently in Firefox and Chrome. After doing some research, I learned that it was due to Firefox and Chrome calculated line-height differently, and a specified line-height could solve my problem.
BUT, to my suprise, even if I did nothing, when I start FF in safemode, the problem solves itself! (it renders similar to Chrome) So I wonder that's because I've customized FF too much? I creat a new profile (no addon, disable all plugin, reset all settings to default) but the newly created profile works the same like my old profile, and different with FF in safemode. I don't understand it?
Safe mode, in addition to turning off all add-ons, also turns off the JIT and hardware accelerated rendering.
And if you're on Windows (which I assume is the case given the described behavior), then turning off hardware-accelerated rendering also turns off DirectWrite rendering of text and uses GDI instead.
But DirectWrite and GDI end up with different font metrics for the same text: for one thing DirectWrite can do subpixel glyph positioning, and GDI cannot. So if you turn on safe mode, line heights and various other aspects of text layout can change.
Note that Chrome uses GDI to start with. IE 9 and 10 on the other hand, use DirectWrite, so it's worth testing how your page behaves in those; I'll bet it's similar to Firefox not in safe mode.
Related
I'm having a heck of a time getting a map to render properly in IE8 or IE compatibility mode. I've tried examples and demos, I've changed maps multiple times... All features seem to work and look great except IE compatibility mode or antiquated versions of IE. Maps ARE rendering on IE8 or below on the jvectormap website just not for the examples offered.
I've even gone as far as trying to replicate the maps on http://jvectormap.com, linking right to it's JS files. Still nothing.
Thanks so much for your time.
I reviewed the link you gave. The only issue I see is an absence of region border in IE8 or compatibility mode. The problem behind this is inability of VML engine to render borders with fractional width. Setting border as 1 makes the example work as expected.
I'm sure this has been discussed before, but I can't find any canonical question / answer.
Currently, IE9 and Firefox 4+ both use different font rendering that produces (for some) more blurry fonts but overall better kerning and more consistent results. Also, it renders non-standard fonts on Windows much better. I've have not done a thorough investigation, but I think it has to do with the fact that both IE9 and Firefox use now a different graphics layer which in apparently renders fonts differently. Also, the reason some of the standard fonts such as Arial, Tahoma etc. look in Firefox the same as 10 years ago is that it actually has a list of exceptions for them (look for gfx.font_rendering.cleartype_params.force_gdi_classic_for_families).
So far so good. The problem is Chrome. It still uses the old font rendering that makes the non-standard fonts practically unusable. Just for illustration, the font I had in mind was: http://www.google.com/webfonts/specimen/Play. Just open the sample in Firefox/IE9 and Chrome and you should see the difference. Is there anything I can do? Or should I look for a more optimized font.
Update: I see it's a common problem: the headings on http://www.smashingmagazine.com look very jaggy in Chrome.
Update: Sample image:
I have read that Chrome (originally Chromium) has anti-aliasing issues that's why it's jaggy.
Using font-faces also makes a difference than using local fonts in your system. So, all we can do is just wait until they fix this issue or help the Chromium Project if you can.
Known issue. You can try gdipp or MacType.
Copying my anwswer from Making CSS3 #font-face font rendering play nice with ClearType on Windows
A similar question here: Font-face embedded fonts look fuzzy in Windows 7 browsers got an answer that solved the same issue for me.
The fontsquirrel font generator http://www.fontsquirrel.com/fontface/generator optimizes fonts and adds them with hinting/rendering info that helps the windows font rendering engine render them better. It also generates smaller files, which will download faster.
We haven't found anything anywhere so far about that very strange effect.
For some time (don't know since when exactly), the capital S letter renders in Windows browsers like it's been moved by one or two pixels to the right. This happens on many browsers, not just on my system, so our customer wants it repaired. It's not a question about local Windows configuration but about browser rendering.
It can be seen here: http://www.holcimfoundation.org/T154/holcim_awards.htm
Here are some facts:
On Mac, Linux, Android and Windows with ClearType switched off the effect doesn't occur
If zoomed in (CTRL+ on Firefox), the effect gets smaller and then disappears
It doesn't happen on every website, just a few - I believe I've seen this elsewhere too (but didn't keep the URLs)
We believe that this is a bug in the Windows font rendering engine. Does anyone have any idea why this happens? Or what kind of workaround we could use?
On Mac, Linux, Android and Windows with ClearType switched off the effect doesn't
I'm not much of a ClearType wizard on Mac, Linux or Android but in Windows you can tune it.
If zoomed in (CTRL+ on Firefox), the effect gets smaller and then disappears
To me this indicates that the text path is being rendered correctly but at 100% with so few pixels to work with the "mapping" is wrong. Do you have a problem with this at 72pt?
We believe that this is a bug in the Windows font rendering engine
Do you have a reference rendering to compare this bug to? For all intents are purposes it could be by design, or your ClearType could be misconfigured.
EDIT:
I looked at this using the "Inspect Element" feature of Chrome. It seems you are trying to do too much with only 10 pixels of character real estate.
Observe the style and the rendering before:
Now take bold off:
Looks like it's not a bug, ClearType is doing the best it can with only 10 pixels.
First off, apologies if this is a simple thing, but I did a search here after googling and came up with nothing concrete: http://stackoverflow.com/search?q=[%40font-face]+print%2C+firefox
I have generated an #font-face kit with font squirrel with two licensed open type fonts. The demo works fine in all browsers except for 1 issue. I want the font to print, and it does for IE, but printing the document in Firefox 3.6.12 & Chrome 8.0.552.215.
Should the FS demo font be printable in FF and GC or is this impossible to do?
Thanks!
I don't think that this is currently possible in firefox, seems to completely disregard the fontface feature.
It's not just this though, seems to disregard background colour css (as do all apart from opera currently).
Spacing seems a little worse in firefox too, more bunched up.
Seems to have an issue with strong tags.
Been having a similar problem and starting to think the issue in with Firefox. A few things seem to point to it being a bug in the 3.6.13 version, but it is also possible that the font file has an invalid cmap problem as Firefox stopped rendering those as of 3.5.4.
More Info:
http://support.mozilla.com/ak/questions/769971
http://support.mozilla.com/sq/questions/761014
invalid cmap problem:
https://bugzilla.mozilla.org/show_bug.cgi?id=526869
What are the main differences (if any) between the box models of IE8 and Firefox3?
Are they the same now?
What are the other main differences between these two browsers? Can a web developer assume that these two browsers as the same since they (seem to) support the latest web standards?
The Internet Explorer box model has been "fixed" since Internet Explorer 6 so long as your pages are in standard compliants mode.
See: Quirks mode and Internet Explorer box model bug.
Until I learnt about doctype declerations getting IE to work properly was a real PAIN, because IE runs in "quirks mode" by default. So having a standards mode doctype will eliminate a whole bunch of the most painful CSS problems.
I would never assume that any browser renders a page exactly the same.. always test!
Even though they support standards, there are plenty of variations between different browsers and even different versions. FF1 renders differently to FF2 which renders differently to FF3.
You also have to remember that each browser has their own JavaScript engine which again, will cause some scripts to work and other to fail.
You can ofcourse reduce these differences by using CSS and JavaScript frameworks which have been developed to support multiple browsers.
However, you still must test in all browsers. There will always be something that doesn't quite look or behave right.
Things that will always differ between the two (and other browsers) are default values (font sizes in headings, for example). The way they achieve default visuals is often different, as well, such as whether or not they use padding or margin to achieve the indentation in bulleted lists.
Something quite positive that I just noticed is that IE8 finally fixes IE's handling of margin: 0 auto for block elements that you want horizontally centered in their respective parents.