I am trying this solution for a star rating.
Can someone please explain why the stars are so much bigger in chrome than in firefox? (I know that webkit and gecko are doing different things from time to time but so much difference?)
And has someone a suggestion on how to fix that?
Update:
This is how big the difference is on my mac:
You are seeing the characters in different fonts in different browsers. The size of a character may well very by font (even when the font size is the same).
The technique uses the characters “★” U+2605 BLACK STAR and “☆” U+2606 WHITE STAR, which are present in a few fonts only. If the font-family property on the relevant element does not mention any font containing those characters, browsers will (or at least should) use some backup font, and different browsers use different lists of backup fonts.
You can make it more probable (though not certain) that different browsers in the same system use the same font for the characters by listing suitable fonts in the font-family list. Even then, the results will vary by system, depending on the set of installed fonts. And in some systems, the rendering may even fail, because no font contains those characters.
This issue could be addressed using downloadable fonts, but that would probably be overkill here.
The practical workaround is to use just images, with a sequence of elements like <img src=star.png alt=star> and <img src=whitestar.png alt=""> or (for better accessibility) a pre-made image that contains a specific number of stars, like <img src=stars4.png alt="four stars out of five">.
I had the same issue and have found that using U+2B51 and U+2B52 ("BLACK SMALL STAR" and "BLACK WHITE STAR") displays consistently between Chrome and Firefox. (Haven't tested thoroughly across other browsers and browser versions yet though.)
May be it's strange for you.. But I dont find any difference in the browsers.
find attached image.
Characters in different browsers may vary. Use image as star. Not char. http://i.imgur.com/I2x2Yld.png use {content:''; background:url(....) no-repeat;}
Related
My site has thumbs up images that I want to render these as HTML entities. The decimal and hex codes are:
👍
👍
respectively.
In FF, both codes are rendered as a thumbs up but in Chrome neither is (nothing is displayed at all).
Here is the rendering (in white) on a dark background.
Why is this happening?
In general, for emoji entities like this, you can't rely on the end user's font including it. This is especially true of Chrome (as of December 2014), which is the last major remaining browser where rendering emoji doesn't work by default.
You're best off using an image here.
A custom font is also a good solution (hat tip to #Vucko).
The font support to THUMBS UP SIGN (U+1F44D) is very limited, as usual for any characters added to Unicode recently (during the last few years). A large number of users’ system have none of the fonts, so the only way to make almost all browsers render the character is to use a downloadable font (web font) via #font-face; in practice, you would use Quivira or Symbola for this. As they are rather large fonts, using an image may be a better option.
What happens when you use the character and do not specify the font at all, or specify a font or list of fonts not containing that character, is that browsers will use some backup fonts. They may do this in different ways, so that browsers in the same system render it differently, since they scan thru the list of fonts in a different order. Moreover, browsers have bugs in this respect. They are expected (according to CSS specifications) to render the character if any of the fonts in the system contains it, but they often fail to do that. Sometimes this is caused by a faulty font: a font contains information according to which it has a certain character, so the browser uses that font, but in fact the character is missing and some generic symbol appears. Sometimes we just don’t know why it fails.
You can avoid such bugs by explicitly listing fonts that are known to contain the character. But this is of course ineffective when the user’s system has none of the fonts.
<style>
.emoji {
font-family: Segoe UI Emoji, Segoe UI Symbol, Quivira, Symbola;
}
</style>
<span class=emoji>👍</span>
i have created a header on my website that uses custom font-faces and have applied a size with pixels (61). and for some unknown (to me) reason the font is rendered nearly twice as large in ie9 and tor than in chromium and firefox. there are no other css settings that appear to me to be relevant (e.g. no font-weight:bold or similar settings). other font-faces appear to render close to or exactly the same size between browsers.
i've exhausted my ideas on what is the cause of this.. if anyone knows, i'd appreciate some assistance. you can view the header here: http://www.infiniteeureka.com
- the cream words 'infinite eureka' are the ones in focus; the multi coloured smaller words render as desired in both browsers.
Firefox has known issues rendering web fonts. I don't really have time to research your problem, but they have Mozilla-specific CSS to deal with these bugs, font-feature-settings in Firefox. I'd start by reading here: https://developer.mozilla.org/en-US/docs/CSS/font-feature-settings?redirectlocale=en-US&redirectslug=CSS%2F-moz-font-feature-settings
I'm having some trouble with font's on cross-browser compatibility. FireFox and Chrome look virtually the same, maybe a bit smoother on FireFox, but on IE9 it seems condensed and a bit bolder? I've used every CSS value for font to try to set a default for every browser but nothing works. Any ideas what IE9 is doing to distort the font? I do like the way it looks in IE9 but I want it to match between browsers.
It's well documented here that IE9 ignores the OS-wide settings for font smoothing (aka anti-aliasing). Even if font-smoothing and ClearType are disabled in Windows, IE still shows anti-aliased fonts, which some users struggle to read, especially at small font sizes.
Microsoft says,
Internet Explorer 9 takes advantage of Windows DirectWrite and Direct2D APIs to render hardware-accelerated text using sub-pixel Microsoft ClearType font positioning. Recent enhancements to ClearType help improve the readability of text on liquid crystal displays (LCDs) by increasing the sharpness of the tiny details of displayed text. The implementation of sub-pixel positioning in Internet Explorer 9 is useful for web developers because text placement and line breaks will remain constant across different users' configurations
However, there are ways to disable this (mentioned here) but it is a client side technique and your code has no control over it.
The font rendering is dependent not only to the browser but also the operating system.
Please see the following two articles which are explaining the difference and what you can do with CSS to overcome it:
http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
In chrome the font appears to be 1px smaller than FF and IE and I cannot see why. The font used is "Georgia" and there are no specific browser commands in the CSS or HTML so I cannot figure out why chrome is displaying it different.
Has anyone come across this before?
Thanks.
This could be based on various factors. Chrome and Firefox use different font rendering engines, and they also differ in how they interpret ClearType font settings within Windows. As well, different browsers apply different default CSS styles to unmarked documents which can cause discrepancies in font-size, among other things. You could try using something like a CSS Reset stylesheet to possibly quell some of the problems, http://www.cssreset.com/ but there's no guarantee that will fix it.
if you want to achieve the same style for every browser, you should try this:
sitewizard
it helped me a lot when i came across the issue. Maybe there is a more elegant solution for the problem but this works definetly.
Text will always differ somewhat between different browsers, and between different systems. Even the same browser on the same operating system may give different results, as there are text rendering settings in the system that may affect the apperance
Also, font sizes aren't really measured in pixels, but in points, so there might be a difference in how browsers translate pixel sizes to points.
Just wondering how come final website deliverables (HTML/CSS) end up not looking exactly (pixel perfect) like the layout that was designed in Photoshop? For examples, 14pt in PS is not exactly 14pt in HTML. Why?
Because different browsers have different rendering engines.
In particular, a font may be rendered quite differently between the various browsers and operating systems in current use - Safari and MacOS use more anti-alisaing than Firefox or IE, but IE9 has a new feature called ClearType, which also affects font rendering.
The end result is that between the various browsers, there can be significant differences between how your fonts look, to the point that it can affect your layout.
This site tries to explain it a bit better: http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
The bottom line: Don't design your pages to be pixel perfect -- you will be dissapointed. HTML and the web just don't work that way; accept this, and you'll have a much happier life.
(Oh, and there's also the issue of not even getting the same font, if you specify one which isn't available on the user's browser).