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

BUT：

出于某种原因，这个SOMETIMES打破了布局。大约每三次我加载页面我会得到这样的东西：

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

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

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

随意看看自己： 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');

    }
}

Answer 2

我在一些网站上看到了同样的问题（或更糟）。大多数时候，文本都是在自己的基础上拼凑在一起的。

我唯一的解决方案是回到较旧的字体。您还可以尝试添加CSS规则：-webkit-font-smoothing: antialiased;以获得一些小改进。

Answer 3

此修复程序与@font-face规则重复。

在Quka的答案中，您不一定需要在媒体查询中使用它，尽管这是一种仅针对webkit浏览器的好方法。

如果您完全复制@font-face声明（首先是svg以获得更好的渲染效果），并将其粘贴到原始版本下方，那么时髦的布局/绘制问题就会消失。

只是呼吁媒体查询在这里并不重要 - 这是重复的规则。这是一个奇怪的错误。太蠢了。