Google chrome Chrome svg字体渲染中断布局

我目前正在做一个小项目，我想通过@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以平滑的方式呈现字体，这非常好

但是：

由于某些原因，这有时会破坏布局。大约每三次加载页面时，我都会得到如下结果：

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

所有的东西都移到左边。更长的文本正在从它们的容器中释放出来。看起来真奇怪

**以前有人遇到过这个问题吗

我很乐意得到这方面的建议**

请随意为自己看一看：

---

非常感谢

我在一些网站上看到了同样的问题（甚至更糟）。大多数情况下，文本是在自身的顶部被粉碎在一起的

---

此时，我唯一的解决办法是回到旧字体。您还可以尝试添加CSS规则：

-webkit字体平滑：抗锯齿的一个小改进。
我自己的一个网站发生了这个问题

不要将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');

    }
}

修复方法是复制
@font-face
规则。
在Quka回答的媒体查询中，您不一定需要它，尽管这是一种只针对webkit浏览器的好方法

如果将
@font-face
声明完全复制为（为了更好地渲染，请先使用svg），并将其粘贴到原始声明的下方，那么时髦的布局/绘图问题就消失了

只是说媒体查询在这里并不重要，这是重复的规则。这是一个很奇怪的错误。太蠢了。
这需要更多的关注！到目前为止，似乎对我很有效。这会有什么影响？这很有效@Pointy是源代码顺序中最后一种受支持的格式，因此SVG将以任何方式覆盖WOFF。我认为这可能是原始摘录中的一个输入错误。@Jitendra此修复程序专门针对Webkit浏览器，而不是Windows Mobile。@Quka，你就是那个人！这对我来说是一个非常奇怪的问题，因为它不是一直存在的，只是每200次刷新时就会弹出一些，但在清除缓存和历史记录之前，它不会消失。这永久性地修复了它，很棒的想法（不在乎它也拉woff文件，这是值得的）。我喜欢你的狗和媒体查询ascii artHaha，谢谢Chris：我在Chrome+Windows 8上也遇到了这个问题。事情正在发生变化的原因是，布局的所有宽度计算似乎都被关闭了，使得容器比它们应该的要小得多。