Question

我在使用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;
}

问题屏幕截图：

enter image description here

图片描述：

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

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

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

Answer 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;
}

Answer 2

我也遇到了与设置禁用的打印预览相同的问题，但谷歌浏览器存在问题。它不允许在打印之前加载Web字体，因此只需将其启用即可。

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

示例：

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

删除onload，我希望它可以解决问题。如果你试过这个，那我很抱歉。

Answer 3

在我的情况下，这是由于在vw中使用相对字体大小。我在@media print {}中加了一个规则，大小为pt，并且完美无缺。有趣的是，它只发生在Chrome中。

Answer 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>

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

4 个答案: