29

我目前正在做一个小项目，我想通过 @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 无法流畅地显示这些字体。

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

但：

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

Chrome 字体问题

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

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

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

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

非常感谢！

4

3 回答 3

78

我在自己的网站上遇到了这个确切的问题。

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

    }
}
于 2013-01-15T19:27:23.447 回答
2

我在几个站点上看到了相同的问题（或更糟）。大多数情况下，文本在其自身之上被粉碎在一起。

我目前唯一的解决方案是回到旧字体。您也可以尝试添加 CSS 规则：-webkit-font-smoothing: antialiased;进行小幅改进。

于 2013-01-04T21:07:17.127 回答
0

解决方法是重复@font-face规则。

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

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

只是说媒体查询在这里并不重要——它是重复的规则。这是一个非常奇怪的错误。如此愚蠢。

于 2013-12-30T22:33:04.977 回答