Note: this issue is on windows.
I found that text my current website is shown different in Chrome and FF. The font is Verdana. The same word in FF look wider than in Chrome. I could not find the reason, so I start to search site that also use Verdana.
I found this site that uses Verdana for side navigation. The links look different in Chrome and FF as well. (Screenshot in chrome, in FF).
But then I found this site where text is also in Verdana. But on this site text looks the same in Chrome and FF?
Why this happens and how to make the Verdana text look the same in these two browsers.
UPD: I added the showcase in jsbin. (I thought that it was more real if I gave links to real site where you can see the problem). Open the jsbin file in Chrome and FF, run js and open console. You can see the width of the div with text in FF is 53 and in Chrome - 49.
The problem is you're scaling the font down to something very tiny, which is impossible to get right: each font engine will do pixel aligning differently, so Firefox, IE, and Chrome will all start to show different metrics the smaller you make things, because they all use different font engines.
Stick to the recommended minimum of 16px and higher and the browsers report the same dimensions; http://jsbin.com/caxasahacu/edit?html,css,js,console,output
(remember that not everyone has eagle-vision. For the vast majority of users, 16px is pretty much the smallest you can reliably make text before you're forcing people to zoom)
Related
So I developed a profile on a website of mine in Firefox (the website accepts HTML in profiles). I then opened it in Chrome and, while there's differences and Pros and Cons I notice to each, I'm not really bothered by anything except the fact that my audio player at the top is properly styled in Firefox, but not in Chrome.
It seems to me that the "height" CSS didn't take in Chrome for some reason, meanwhile it takes just fine in Firefox.
Any idea how to fix this issue? If not, at least help me to make it so that it'll display normally in Chrome, even if it has to be fat instead of the slim bar I wanted. At the very least I want it to be functioning and not obscured by the page, even if it's not exactly what I had envisioned.
I've tried several #media "hacks" to target only Chrome / webkit but they don't take either.
Profile in question located here (flash required). Sources are freely available in the sources tab. The CSS classname is .BGM.
Thanks.
Edit: Images of the difference: https://imgur.com/a/EQyqD
You can see the problem - I want it to display correctly like it is in Firefox, not be crushed like it is in Chrome. I'd actually like to be able to style it further for Chrome - make it styled the same in Chrome as it is in Firefox - though I'm guessing that Chrome may just not be as flexible about this as Firefox is.
PS: Yes, insane that a site still runs on Flash over HTTP in 2018, and yes the profile designs on the site are all juvenile and edgy. It's a guilty pleasure of mine - and it's a nice little coding playground.
Change the height attribute within the .bgm class to something bigger, like 30.
If you're really attached to how the player looks on Firefox, you can also introduce some Chrome only margin to .bgm:
-webkit-margin-before: 12px;
If you want to make the Chrome player slimmer you will need to look into webkit masks, which requires an additional image file.
[Problem] -- I am having a problem with web fonts rendering on a specific computer, other computers in my house render the text fine (same OS and browser versions). They look really bad and pix-elated I know all about differences between how browsers render things differently but its not supposed to look this bad.
[What I've Tried] -- I tried prioritizing the .svg in my CSS first on my site to fix it on Google Chrome but it did not help. I installed Firefox and discovered it too does not render the Open Sans font correctly either. I also have tried clearing my cache (I have a cache clearing plugin) and opening in a incognito window thinking a chrome extension was causing a problem but no difference. From the screen shot it appears Chrome at least renders the larger "Open Sans Condensed" but the smaller text is pixelated. Its weird a fresh install of FF also has the same problem as Chrome. Also tried downloading the font files from Google Fonts and installing them locally, no difference.
IE 11 renders the text correctly. I need trouble shooting ideas..
The screen shot below is from the official Google Fonts website located here http://www.google.com/fonts/specimen/Open+Sans#pairings so it should rule out any bad coding on my own page. The open sans font on fontsquirrel loads correctly and its not pix-elated.
Here is what I see and I don't think the fonts should look that pixelated... http://imgur.com/hwvupBq sorry too low rep to post images :(
Each browser loads the fonts using different formats. Usually you would use font-face with the four different types, EOT, WOFF, SVG AND TTF. You can use the Font Squirrel site to load your font and spit out the four different versions. Also, take a look at Google font embedding which takes care of the the work (although they will look slightly different in different browsers)
The problem ended up being that my Windows 7 machine did not have cleartype enabled. See this post to see how to enable it http://www.howtogeek.com/howto/28790/tweak-cleartype-in-windows-7/
I am working on a project where client wants to use MotivaSans-Bold.
However on windows browsers it displaces text on twitter bootstrap enabled buttons but looks good on Mac browsers. But if I try to change padding it disrupts Mac browsers.
What can be the problem? Is there any problem associated with webfonts?
EDIT
#font-face {font-family: 'MotivaSans-Bold';src: url('webfonts/279BB3_D_0.eot');src: url('webfonts/279BB3_D_0.eot?#iefix') format('embedded-opentype'),url('webfonts/279BB3_D_0.woff') format('woff'),url('webfonts/279BB3_D_0.ttf') format('truetype');}
The problem is most likely that the spacing on the webfont is going to vary from browser to browser. What's probably going on is that on Chrome on the Mac the font and button look good, but then Firefox on Windows 7 the fonts renders slightly larger and throws off your button.
You should be able to address this with padding/margin via CSS as long as you don't try to set any fixed widths.
If you post a link to the page it'll be easier to suggest a more specific answer, but if the webfonts look relatively similar both Mac and Pc than there's nothing 'wrong' as far as the font goes and it's really a CSS issue.
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/