in Safari 5.1/Windows XP, the unicode arrow in the button element is not shown. <span> is working fine.
<span>▼</span>
<button>▼</button>
Screenshot:
http://cl.ly/image/1T0J1X10141A
fiddle:
http://jsfiddle.net/christianhaller/nTvjU/1/
Any hints to fix this?
further information: IE8 on the same OS has no problems with the unicode character
This is a font problem. It does not exist in Safari 5.1.7 on Windows 7, but I was able to reproduce it in Safari 5.1.7 in a virtual Windows XP. Instead of the triangle character, a small rectangle appears, a common indicator of a missing glyph.
Apparently, on Windows XP, Safari uses some fixed font (seems to be Microsoft Sans Serif) for button elements and fails to look for other fonts when it encounters a character that is not present in that font. Luckily, this can be fixed by specifying a font that does contain it. If you prefer to have button elements rendered in Microsoft Sans Serif in general, it suffices to specify a fallback font in CSS:
button { font-family: Microsoft Sans Serif, Arial }
Quite a few fonts contain the triangle character, so there are many options. And you might wish to make some of them the primary font for button elements, not just as fallback font.
Related
I have attached the image for what I am facing right now, there is a lot of difference between firefox for windows and firefox for mac, I have checked other browsers so far, Mac Firefox, Mac Chrome, and Windows chrome are showing the same results, but the firefox on windows is having different font.
I also have included the text properties by inspecting element via firebug.
Any idea why firefox for windows is having different font rendering? and How I can improve it. This issue breaks the whole layout for complex forms.
What I have heard, is that Firefox under Mac uses different font algorithms.
Try the following
html, body {
-moz-osx-font-smoothing: grayscale;
}
They are different browsers on different operating systems. Difference in font rendering is inevitable, and there's nothing much you can do about it.
I am unable to fix this, so my safe exit was using Arial Font. Verdana Font size 9 is like 10/20 and Arial is like 18/20 where first number is FF Windows and later number is Chrome Window
Please have a look at this JSFiddle:
http://jsfiddle.net/tCeKm/
We are using a #font-face to embed the font Bitstream Vera Sans. On Firefox and IE, the font renders okay:
On Chrome 35 on Windows 7 however, there are some gaps between the Y character and the following one:
We're using the HTML5 Boilerplate CSS reset, so the differences are most likely a bug in Chrome or a problem with the font.
EDIT: In the Chrome screenshot (second image), the font appears to have a smaller weight. This is only because Stackoverflow scales the second image down since it has too much width.
Those "gaps" are missing because there is no kerning being applied to the font. You're likely using Chrome on Windows — Chrome on OSX will show your font properly kerned.
More info in this Typekit article:
Chrome on Windows does not support kerning at all, which is caused by their use of GDI for rendering text. Chrome will soon switch to rendering text using DirectWrite and should then also support kerning and other OpenType features on Windows Vista and above. Kerning is enabled by default in Firefox and Safari 7 (on both OS X and iOS).
I'm working on a project that requires using a single glyph font to replace the space (unicode 0020) in flow text with a special character. I've got this working beautifully in IE9+, Firefox and Safari, but Chrome is not behaving. Opera looks the same as Chrome but I don't have to support it.
I have a webfont, made using Font Squirrel in the usual way, which just defines unicode 0020 (the space) and I use it in a stack like this:
font-family:'My Replacement Space', arial, sans-serif;
In all the browsers that work, the space is replaced and all the other characters are rendered using arial (or sans-serif) as a fallback. In Chrome, Arial is used throughout and the spaces remain blank.
Anyone recall anything buggy relating to Chrome and something like this?
Many thanks!
I'm working on an HTML page that needs to be more or less pixel-perfect, and I noticed that in Opera 10, fonts are rendering larger than they do in other browsers, even though the font-size is effectively the same.
Please see this example page in Opera 10 and another browser like Firefox 3.6:
http://troy.onespot.com/static/stack_overflow/opera_font_size.html
Alternatively, here's a screenshot that illustrates the issue:
http://skitch.com/troywarr/d47m1/font-size
The red boxes behind the "50px" and "46px" text (both styled to have the corresponding font-size) both have a height of 50px.
In Firefox 3.6, the descender of the "p" in "50px" lines up with the bottom of the red box behind it. In Opera, the descender of the "p" in "50px" hangs below; it's the "46px" that more closely matches the "50px" in Firefox. That suggests to me that Opera is rendering fonts in the ballpark of 10% too large.
This, and the same issue with other body text, is completely throwing off my page layout in Opera 10. Please let me know if you have any ideas about what may be causing this, or at least how to prevent/fix it.
Thanks!
UPDATE:
It appears that I don't have a proper copy of Helvetica installed - I removed it from the font stack and saw no difference in the rendered text on my test pages.
I updated the test pages to only use the generic "sans-serif" font-family, so hopefully we're all seeing the same thing now.
Interestingly, using the generic "serif" font displays exactly the same in Opera and Firefox.
Could this issue just be a quirk around how Opera displays the generic "sans-serif" font?
UPDATE 2:
This may be important: I'm using Mac OS X Snow Leopard. I'm experimenting with other fonts now to see if I can isolate the issue any further.
UPDATE 3:
I created another test page using Arial:
http://troy.onespot.com/static/stack_overflow/opera_font_size_reset_arial.html
And now Opera and Firefox match almost exactly!
I can probably get away with using Arial in lieu of Helvetica on this project. As far as I know, I have a completely stock OS X version of Helvetica - so I can't afford any disparity between how different users may be seeing the fonts on my page. I'll stick with the tried & true Arial.
What could this mean, though - does OS X's default sans-serif font just render strangely in Opera or something?
I came across this thread when I was having similar issues with Opera 11.10 on Windows 7 x64.
Opera was defaulting to using 20px as the body font-size (rather than 16px which is what other browsers use). This persisted even after uninstalling, deleting Opera preferences and re-installing. It turns out that Opera will honor your system font-size preferences
(set under 'Control Panel\Appearance and Personalization\Display' on Win7) for rendered website text whereas other browsers (I tested FF4, Chrome 11, Safari 5, IE 9) do not. My system font size was set to 125% which explains the 20px. Once I set my system font zoom to 100%, Opera behaved the same as the others.
I'm not sure which behavior is more correct (In a way, it's nice that Opera honors my font choice) but since since other browsers do not do the same, it is "unexpected". I don't have a Mac to test but perhaps MacOS has a similar system font preference?
I was having a similar issue.
I found that the default computed font size in FF and most other browsers on is 16px, but on opera the default seems to be 20px.
I simply set font-size:16px; for html, and it seemed to take care of it.
My suspicion is that Opera uses a different fallback font for Sans-serif than the other browsers do. That should be possible to confirm or eliminate by using a different font that is definitely installed on the system.
I'm not reproducing your problem. This is what I get in Firefox 3.6.8 (and in Internet Explorer 8):
I think I know your problem. I am getting it exactly the same size in all browsers (at least Firefox, Opera and Chrome). This, I am sure, can be easily overlooked if you dont know you or someone else has done this, but try checking the zoom settings in Opera... let me know if it doesnt help and I will work some more on it.
This is where a css reset stylesheet can really simplify things for you.
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
I had similar issue until I used reset CSS of Eric Meyer :)
Came across similar issues, had to change my fallback order
from:
font-family: Helvetica, Verdana, Arial, sans-serif;
to
font-family: Helvetica, Arial, sans-serif;
Since Arial and Helvetica are almost exactly the same size, when opera falls back it still looks good.
Since FixedSys won't display in Chrome or Safari I make it switch to Lucida Console. It works for Chrome but for Safari I run into an issue. Unless Lucida Console is by itself, it WILL be to the font I said. If not -- then it won't work.
Have a look at this picture:
I don't know what font the first Hello world! is but it's weird. It's weird because the default font on my Safari is Times New Roman. I have checked. Also, it's not in conflict with any other style because I have tried it by itself and the problem persists.
font-family's fallback feature works based on installed fonts: if you have FixedSys installed, Safari will attempt to use it. You mentioned that FixedSys "won't work" in Chrome or Safari: it could be that it's interpreting FixedSys incorrectly or that your FixedSys is corrupt.
As Safari 4.0 final was released in 2009, and the current stable release of Safari is 5, it's very likely that there was a problem in Safari 4 beta's font rendering code.
If you have a font installed, there's no way in browsers that support CSS correctly (Safari, Chrome, Firefox, later versions of IE) to say "fallback to the next font even if you see that I have the first font installed". Instead, you'll either need to resolve your issues with FixedSys (that is, upgrade to a stable version of Safari to see if it fixes it) or remove it from the font-family list.
A few other notes:
Lucida Console is not installed on most Macs, so if you're trying to be cross-platform, you need to provide a fallback (like monospace).
The CSS spec requires multi-word fonts to be enclosed with quotation marks. Your CSS should look like: font-size: FixedSys, "Lucida Console"
Does it work if you include quotes around "Lucida Console"?