Chrome svg-Font-Rendering打破了布局

Question

我目前正在开发一个小项目,我想通过@fontface使用webfonts.

我实现了这样的字体:

@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;

现在您可能已经遇到过Chrome浏览器在以平滑方式显示这些字体时遇到问题.

经过一番搜索,我发现了一个似乎有效的解决方案:你只需移动这部分css:

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

所以你最终得到这个:

@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;

现在Chrome以平滑的方式呈现字体,这很棒.

但:

由于某种原因,这个有时会打破布局.大约每三次我加载页面我会得到这样的东西:

一切都向左移动.较长的文本正在打破他们的容器.看起来很奇怪.

**之前有没有人遇到过这个问题？

我很乐意就此提出建议.**

随意看看自己: 在线查看Fireflycovers.com

非常感谢!

Answer 1

我已经把这个确切的问题发生在我自己的网站上.

不要将svg放在顶部,而是保留原始格式,但添加媒体查询,如下所示.这将使chrome完美呈现字体并修复布局.

@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');

    }
}