Chrome svg-Font-Rendering breaks Layout

问题:

I'm currently working on a little Project in which I'd like to use webfonts via @fontface.

I implemented the font's like this:

@font-face {
    font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

Now as you have probably experienced Chrome has problems displaying these fonts in a smooth way.

After some searching I found a solution which seem to work: You simply move this part of the css:

    url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

So you end up with this:

@font-face {
    font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

Now Chrome renders the Fonts in a smooth way, which is great.

BUT:

For some reason this SOMETIMES breaks the Layout. About each third time I load the page I'll get something like this:

Everything is moved to the left. Longer texts are breaking out of their containers. Looks really strange.

**Has anyone experienced this problem before?

I would be happy to get advice on this.**

Feel free to take a look for yourself: View Fireflycovers.com online

Thanks a lot!

回答1:

I have had this exact issue happen to a website of my own.

Instead of putting the svg at the top, keep the original formatting but add a media query as shown below. This will make chrome render the fonts perfectly and fixes the layout breaking.

@font-face {
   font-family: 'CardoRegular';
    src: url('../fonts/Cardo104s-webfont.eot');
    src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
         url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'CardoRegular';
        src: url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

    }
}

回答2:

I have seen the same issues (or worse) across a few sites. Most of the time the text is smashed together on top of itself.

My only solution at the point is to go back to the older font. You can also try to add the CSS rule: -webkit-font-smoothing: antialiased; for a small improvement.

回答3:

The fix is in the duplication of the @font-face rule.

You don't necessarily need it in a media query in the Quka's answer, though that's a nice way to only target webkit browsers.

If you duplicate your @font-face declaration exactly as (svg first for better rendering), and paste it below the original, the funky layout/draw issues are gone.

Just calling out that the media query isn't important here—it's the duplicated rule. This is such a weird bug. So dumb.