google-chrome - Chrome svg-Font-Rendering 中断布局

Question

我目前正在做一个小项目，我想在其中使用 webfonts 通过@fontface .

我实现了这样的字体:

@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 以平滑的方式呈现字体，这很棒。

但是:

出于某种原因，这有时会破坏布局。大约每第三次加载页​​面时，我都会得到如下信息:



一切都向左移动。更长的文本正在脱离它们的容器。看起来真的很奇怪。

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

我很乐意就此获得建议。**

随意看看自己:
View Fireflycovers.com online

非常感谢!

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

    }
}