打印网页时出现乱码

Question

我正在开发一个网站，用户经常需要从该网站打印页面以便提供给没有互联网访问权限的人。但是我们发现，在用户的办公打印机上打印时，有些文本会出现乱码：

这应该是指芝加哥交通局的优惠票和免费乘车计划。

我最初的想法是与我们使用的字体有关，因此我将该文本更改为font-family: 'Times New Roman', serif。一些谷歌研究让我认为这些字体设置被广泛支持，不应该引起问题，但我们的用户仍然存在问题。

即使您不知道如何确切解决此问题，我也会感激建议

1. 除了字体选择之外还可能导致它的原因是什么？
2. 如果您认为它与字体有关，那么使用什么字体好？或者我该如何找出来，这是特定于打印机的吗？

更新

该页面正在从浏览器中打印，对于这个特定的用户组来说，他们使用的是IE8。我不确定他们所用的Windows版本。我在办公室的Windows机器上测试了这个问题，并没有复制出现的问题。因此，虽然浏览器可能是一个因素，但我不认为它是唯一的因素。

第二次更新

我们使用的字体是Libre Baskerville，通过Google Fonts API加载。它在屏幕上呈现良好，并且实际上可以从我们客户办公室的某些打印机中无问题地打印。但当在Lexmark MS410dn上打印时，文本只会出现乱码。

- declan

---

你用什么工具打印网页？是从浏览器中打印（用的是哪个浏览器？），还是在服务器端生成PDF，或者是使用客户端的某种HTML5画布来绘制它？ - amphetamachine

一些打印机内置了字体渲染引擎，但大多数打印作业都会嵌入字体，因此我怀疑您的办公打印机不是导致问题的原因。测试的简单方法是打印使用相同字体的其他网页。如果页面正确打印，则知道这不是硬件问题。但要真正帮助您，看到您正在使用的代码将非常有用，否则我们只能进行推测。 - Dryden Long

另外，您的用户是从 Mac 还是 PC 打印的？Mac 默认情况下没有 Times New Roman 字体，但有一种类似的字体叫做“Times”。您可以尝试使用类似于 font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia, serif; 的字体设置来解决这个问题。 - Dryden Long

还有一个想法突然浮现在我脑海中，你也可以尝试使用@font-face来嵌入字体，避免用户没有安装字体的任何问题。你甚至可以使用单独的“打印”样式表并嵌入SVG字体。SVG字体实际上只是矢量轮廓，而不是真正的字体，因此任何硬件问题都应该被规避。 - Dryden Long

感谢您的初步反馈，我已经在上面发布了一些更新。您想看到特定的代码部分吗？ - declan

我们正在使用@font-face声明，并从Google Fonts加载字体。网络字体绝对不是我的专业领域...这是否使用SVG？ - declan

Answer 1

我曾经遇到过这种打印错误。我使用Libre Baskerville字体在Windows 10上用Indesign创建了一个PDF文件。当我试图在OSX上使用Preview打印PDF时，出现了与上面看到的相同的乱码字形。我通过卸载TrueType格式的Libre Baskerville字体并安装OpenType格式的Libre Baskerville字体，并在文档中重新设置字体来解决了这个问题。看起来它是有效的。

- Darryl Gold

---

你需要在回答中提供任何限制、假设或简化。有关如何回答的更多详细信息，请参见此链接：https://stackoverflow.com/help/how-to-answer - Usama Abdulrehman

非常感谢。这个方法对我也有效。唯一的问题是.otf字体在屏幕上看起来很糟糕，但打印出来效果很好。我还找到了另一个解决方案。请看我的回答。 - undefined

Answer 2

最终最简单的解决方案是在打印时使用不同的字体。问题只发生在少数几台打印机上的Libre Baskerville字体，因此在我们的print.css样式表中，我们只使用基本衬线字体。虽然不理想，但至少打印输出是可读的。

在原帖中，我说过尝试切换打印输出的字体，但用户仍然遇到问题。这实际上是由于print.css样式表的缓存造成的，所以这个修复措施确实解决了问题。

从长远来看，我们可能会找到一种在所有打印机上都能一致工作的字体，并将网站切换到该字体。

- declan

Answer 3

尝试使用Open Type版本替换True Type版本的字体 - 我现在可以无问题地打印Libre Baskerville。 Open Type版本不容易找到，因为大多数下载（包括Google Fonts）只提供.ttf文件选项。搜索.otf文件版本 - 我在这里找到了一个：https://www.broble.com/download-free-font/libre-baskerville

- Gerard

---

谢谢！我不再在这个系统上工作，也没有任何测试这个建议的方法，但希望它对其他人有所帮助。 - declan

Answer 4

就记录而言（针对任何有类似问题的读者），我在我的笔记本电脑上使用LibreOffice打印使用Libre Baskerville字体编写的文档时，遇到了完全相同的问题。该字体已嵌入RTF和PDF格式中，在打印时出现了相同的乱码。我通过更改为不同的字体来解决了这个问题。LibreBaskerville是一款不错的字体，这真是太遗憾了。

- Richard

Answer 5

对我来说有效的方法是使用PCL驱动程序而不是PS驱动程序进行打印。这样我可以得到适当的打印效果，字体在屏幕上也看起来很好。

@Gerard的方法是使用.otf文件而不是.ttf文件，这也可以实现正确的打印效果，但在屏幕上显示的文本效果不太好。

- tell

Answer 6

可能是导入的字体文件中存在一些错误。有时，如果您使用在线字体转换器将字体转换为Web字体，它会在转换过程中出现一些错误。您可以尝试使用Google Fonts。找到一个你喜欢的衬线字体，使用他们的文件和导入脚本。

例如，如果您想使用Bitter字体：

1. 只需在CSS文件顶部放置@import url(http://fonts.googleapis.com/css?family=Bitter);
2. 在样式声明中使用font-family: 'Bitter', serif;。

NB： serif部分是备用选项，以防出现问题，客户端浏览器选择默认的衬线字体。

- Philip

---

谢谢您的建议。我们已经在使用Google字体，其中包括Libre Baskerville字体。由于它在屏幕上和大多数打印机上都能正常显示，我怀疑导入的字体文件中是否存在错误。 - declan