I have created a responsive website using HTML5 with Bootstrap. It is
working fine in Firefox, ie but when i checked in the chrome the page
looks like skewed and not clear(text).
Can anyone faced these type of problem, if yes could you please tell me how to solve this issue.
i can attach screenshot for your reference but as a new user site is not allowing to attach.
The screenshot shows Chrome/FF side-by-side. I do not see any difference. I was asking YOU where the issue is, since clearly it’s not present on my end
As I said above this is a long standing issue in Chrome and mostly beyond your control. It was purported to be fixed in chrome 37 but I’m not so sure as it still leaves a lot to be desired.
An old fix was to add textstroke to the element concerned which made it a little bolder.
e.g.
‘-webkit-text-stroke: 1px’
However that sometimes makes the element too bold.
The issue does depends on the fonts chosen and some of the free fonts are the worse. If you choose fonts and then run then through the font-squirrel generator you may get better hinting in the fonts but obviously you can’t do that with google fonts.
Your image looks acceptable to me and the chrome fonts look better than the Firefox one as they seem to be anti aliased better.