从 Google Chrome 打印 Web 字体时显示垃圾字符答案

【问题标题】：Garbage character displayed while printing web fonts from Google Chrome从 Google Chrome 打印 Web 字体时显示垃圾字符
【发布时间】：2012-04-16 11:35:15
【问题描述】：

我在从 Google chrome v 18 打印网络字体时遇到问题，但它在 IE 和 Firefox 上运行良好，我使用 CSS 文件来传递网络字体，其代码如下。

@font-face {

font-family: 'C39P24DmTtNormal';
src: url('WebFonts/v100025_-webfont.eot');
src: url('WebFonts/v100025_-webfont.eot?#iefix') format('embedded-opentype'),
     url('WebFonts/v100025_-webfont.woff') format('woff'),
     url('WebFonts/v100025_-webfont.ttf') format('truetype'),
     url('WebFonts/v100025_-webfont.svg#C39P24DmTtNormal') format('svg');

font-weight: normal;
font-style: normal;
}

问题截图：

图片说明：

在上面的屏幕截图中，所有标记为红色的都是CSS文件中Web字体提供的条形码，但打印时如上所示。

我尝试在 Google 上搜索，但 Chrome 似乎是 possible bug，他们正试图尽快修复它。

有什么解决方法可以帮助我，因为我不希望我的客户在他们用来浏览我的网络应用程序的每台计算机上安装字体。

【问题讨论】：

您有指向 Chromium 中的错误/问题的链接吗？
code.google.com/p/chromium/issues/detail?id=98011
这是在打印预览中发生的问题还是正常情况？屏幕截图也可能会有所帮助。
首先打印预览出现问题，因为在加载页面上的数据之前触发了预览，因此我从设置中禁用了打印预览，该问题已解决，但现在问题开始了打印命令被触发。
在 Chrome 错误报告中，其中一位 cmets 提到使用 Chrome 15。也许更新 Chrome 会有所帮助？我在 Chrome v18 上，错误中提到的字体似乎对我来说正确显示。

标签： css google-chrome webfonts

【解决方案1】：

将.svg 放在源代码的开头并尝试使用不同的格式，例如.svg 为truetype：

@font-face {
    font-family: 'EnzoOT-Medi';
    src: url('font.eot');
    src: url('font.svg') format('truetype'),
         url('font.eot?#iefix') format('embedded-opentype'),
      url('font.woff') format('woff'),
      url('font.ttf') format('truetype'),
      url('font.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

【讨论】：

感谢您的建议，但结果相同，没有任何改变。

【解决方案2】：

我也有同样的问题，从设置中禁用打印预览，但在谷歌浏览器中出现问题。它不允许在打印之前加载网络字体，因此只需将其重新启用即可。

如果您在body.onLoad 上使用Windows.print，则将其作为问题的真正原因将其删除。这仅受 Internet Explorer 支持，Google Chrome 不支持。

例子：

<body onload="window.print();">

删除onload，我希望它能解决问题。如果您已经尝试过，我很抱歉。

【讨论】：

【解决方案3】：

在我的情况下，这是由于在 vw 中使用了相对字体大小。我在@media print {} 中设置了一条大小为 pt 的规则，并且效果很好。有趣的是，它只发生在 Chrome 中。

【讨论】：

【解决方案4】：

此问题的真正解决方法是不在预先格式化的打印页面上异步加载 webfonts。这样做您仍然可以使用window.onload = window.print() 强制打印对话框而不会出现任何问题。

<script>
  WebFontConfig = {
    typekit: { id: 'xxxxxx' }
  };

  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
              '://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'false';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
</script>

【讨论】：