logo标签列表

从Google Chrome打印网页字体时显示垃圾字符

cssgoogle-chromewebfonts
5

我有一个问题，使用Google Chrome v18无法打印网页字体，但在IE和Firefox中完全正常。我使用CSS文件传递Web字体，以下是代码：

@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的一个潜在错误，他们正在尽快修复它。

是否有任何解决方法可以帮助我，因为我不想让我的客户在每台计算机上安装字体来浏览我的Web应用程序。

你有Chromium中的错误/问题链接吗？ - Ross
http://code.google.com/p/chromium/issues/detail?id=98011 - Karan Shah
这是在打印预览中发生的问题还是正常情况下出现的？提供一张截图可能会有帮助。 - Ross
在Chrome的错误报告中，有一条评论提到使用Chrome 15。也许更新Chrome会有所帮助？我使用的是Chrome v18，该错误中提到的字体似乎对我来说显示正常。 - DACrosby
我也在使用相同的Chrome 18.0.1025.162 m版本，但仍然出现相同的错误。 - Karan Shah
显示剩余2条评论
4个回答
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;
}
谢谢您的建议，但结果没有改变。 - Karan Shah
0

这个问题的真正解决方法是不要在预格式化打印页面上异步加载Web字体。这样做，您仍然可以使用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>

0
在我的情况下，这是由于在vw中使用相对字体大小所导致的。我在@media print {}中放置了一个规则，大小为pt，效果完美。有趣的是，这只发生在Chrome浏览器中。
0

我也遇到了同样的问题，即在设置中禁用打印预览，但这是在Google Chrome中出现的问题。它不允许在打印之前加载Web字体，因此只需将其重新启用即可。

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

示例：

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

移除onload，希望能奏效。如果你已经尝试过这个方法，我很抱歉。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接