问题
I have this weird problem with Chrome. I use Bootstrap with its glyphicons and another font (BYekan) included using @font-face.
But sometimes the glyphicons and BYekan fonts appear as they should do, and sometimes an square appears instead of those fonts and as soon as I hover the mouse over the square, the correct form of glyphicons and my font BYekan appear.
I'm referring to a nearly exact copy of my question though with illustration (glyphicons icons not get suitable for chrome) which I think does not have a suitable answer.
I'm using Chrome version 32 On a Windows machine. In addition I'm using the popular Flat UI which is based on Bootstrap and the same issue applies to its web font icons too.
I think this issue is shaking my design and I'm really concerned. I wanna be clear that dismissing Flat UI or BYekan font is OFF the table and not a solution.
回答1:
I've also experienced this issue on Bootstrap-powered sites (Twitter being a notable example). This is very likely related to a known Chromium issue. It is reported to be fixed and the fix is expected to be shipped with Chrome 33.
回答2:
Found the solution!
If you don't set font-size for your texts, the default font size is 1em. And apparently Chrome has problems with this font size for some fonts!
So just set your font-size something else (for example font-size: 1.001em) and your fonts will be shown correctly :)
来源：https://stackoverflow.com/questions/21361896/fonts-not-properly-shown-on-google-chrome