I'm using some google web fonts for dynamically rendered svg logos. The fonts I'm using don't have italic versions and I'm actually pretty happy with the way Chrome fakes it when I put font-style="italic". The only problem is that firefox doesn't seem to fake it at all. This fiddle shows it: http://jsfiddle.net/a6C32/3/
Is there a set way of recreating that Chrome functionality across all browsers?
Just to clarify what I'm seeing:
Chrome (36.0.1985.125 OSX):
Firefox (31.0 OSX):
UPDATE: so after playing around with it some more, it turns out Firefox will do faux italics unless the text element also has a stroke defined on it: http://jsfiddle.net/a6C32/4/
Definitely a bug in Mozilla. My quick fix with SVG magic:-
font-style="normal" transform="translate(10,0) skewX(-20)"
Related
I have a problem with content from CSS on IE11.
.icon-ok:before{content:"\f113"}
IE11 is computing this to .icon-ok::before{content: normal}
I can see that there is .icon-ok::before{content: "\f113"} but it is crossed.
So I didn't get the right icons there. - Ofc it is working on all other browsers.
I thought that's because of the ::before pseudo-class, but it is computed by IE, in the source css file it is written as :before.
Can somebody tell me whats wrong there?
Edit:
I figured out that the IE is changing the icon-font id's.
When I use "\f118" in IE it is working properly there.
How can it be?
This can happen because different browsers needs different formats of the font.
So this isn't basically a CSS problem rather a problem which format of the font is used.
hi been trying to find a solution for to make fonts look as nice as they do in safari 5.1.7
in chrome v34
in chrome (and IE and FF) they are all jagged, but in safari they are nice and crisp!!
heres example
chrome
http://screencast.com/t/CpJDoManNbQg
safari
http://screencast.com/t/9nYGOh7N
if you dont notice this aliasing difference between the major browsers or think its worth complaining about then pls dont reply
why dont all browsers have the same font rendering as safari?!
its so much nicer and easier to read!
its 2014 for goodness sake!
so as designers we can produce websites that look like printed material
anyway!
i stumbled across this site just before
and on chrome the text appears very close to how it does on safari
eg there is way more anti aliasing than before
http://action.sumofus.org/a/Facebook-app-taps-phones/3/2/?sub=fb
EDIT here another site with clean anti aliased fonts on chrome!
https://www.dartlang.org/
can someone tell me how its been done?
or how else to smooth the jaggys?
ive trawled here trying everything and nothing seems to work!
thanks in advance for any help you can provide!
Chrome has a problem with rendering fonts, even those from Google Fonts.
One way I've found is adding this to your css:
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.4);
As you can see more here:
http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/
It seems more like one is bold, or different weight- safari being heavier. I see this all the time, usually i test the difference between ie/ff/chrome sometimes to compensate i add a few more font weights with cufon and make ie lighter.
One thing I always add to my class for better font rendering is this.
-webkit-font-smoothing: antialiased;
Try it out and see if there is any improvement.
Please see the above image. I'm using the icon font 'FontAwesome' on my website. In the website header, I'm using them for navigation icons. Each of these icons are links, that have the 'fa' and 'fa-2x' classes attached.
I'm not overruling any default font sizes or rendering modes for FontAwesome, so this is a clean state. All screenshots are from Windows 8.1, testing several browsers. Here are my findings:
Firefox: perfect rendering, optimal balance between legibility and anti-aliasing
Chrome: font rendering too thick and harsh, hurting legibility
Safari: reasonable legibility, yet a bit too thin and harsh
IE10: Very close to FF, acceptable as-is
Opera: Same as Safari
Mu ultimate goal would be to have ideal rendering across browsers, as per the Firefox example. A perhaps more realistic goal is to beat Chrome into submission, as it presents the biggest issue.
Font-Awesome by default has this applied:
-webkit-font-smoothing: antialiased;
I've tried setting this to the other text rendering modes, yet none seem to make a meaningful difference, the same is true for setting the text-stroke property, even at 0 the 'thickness' problem remains. That problem is best seen from the 'members' icon.
You can see the rendering live at www.jungledragon.com
Any clues/tips on how to improve rendering quality and consistency?
That's old issue I can see, but I had similar problem with FontAwesome and discovered that weight of these icons can be different depending on font-weight attribute (that's a font, after all).
So, my problem was that narrow holes in icons becomeing invisible in my app and the solution was setting the font-weight attribute to normal in CSS.
For my liking, icons in Chrome version of your issue are just "overweighted" that way.
I have been following mozilla developer network's docs and created a transition for my images to change. They seem to work fine in Chrome (19?) but not in Firefox 11 (or any other browser).
I have created a test case here on jsfiddle - http://jsfiddle.net/9nevB/1/
I've tried this in many different ways and still can't get it to work on firefox.
Any ideas?
Thanks
According to the CSS3 specification, background-image is not animatable. Browsers may provide this implementation, but it is not standardized.
I have a webpage which I have made entirely as svg (apart from the html to load the svg). So far, so good, and you can see it here (not yet complete): http://kitandmarcin.us/svgcontainer.html (it's for my own wedding, so "the client" doesn't care that not all users are getting the same experience).
This works just great in Firefox, Safari, and Chrome. It basically doesn't work in IE (including IE9), or Opera. I haven't tested anything else.
My question is, what is the best way to handle giving IE (and, I suppose Opera) users either (a) a redirection to a different page, or (b) show them something else (probably a screenshot).
I would prefer not to use javascript, because I suspect if they are already having trouble viewing the page, problems on their end with javascript are quite possible.
It works fine in Opera 11 / Windows.
You should consider just making it in good old HTML/CSS - it's not a particularly complex layout.
Alternatively, use javascript on your parent page to redirect users of IE to a static PNG version of your SVG.
IE8 simply does not support SVG without a plugin - javascript will work just fine on the page. However, SVG is supposed to work in IE9, so I'm not sure why yours doesn't. I don't yet have IE9 here, so I can't test.
ForeignObject is probably the answer why it doesn't work. Given that your svg is quite simple, I'd suggest removing the foreignObjects and using svg text and tspan elements instead. That should make it work in all browsers. And seeing how you used inkscape to create the svg it could have done all the linewrapping etc for you anyway.
From other answer about flow-elements in inkscape:
Inkscape can generate <text> and <tspan> for
you quite easily, just don't click and
drag an area but instead just click
where you want the text and start
writing, then press return where you want a
new line.
I'm not sure if IE9 supports foreignObject.
There's a way to do automatic linewrapping in svg tiny 1.2, which is supported in Opera, a workaround solution could look something like this. But to get IE9 compat too, you'll probably have to go with text+tspan.