Google 将 Vue 应用程序打印为 pdf 时，字体会阻止选择文本

Question

我正在创建一个简单的 Vue 应用程序，我将使用它来生成 PDF 格式的简历。我已将 google 字体 Montserrat 添加到此项目中，当我将此页面打印到文件（在 Firefox 中为 CTRL + P）时，无法选择文本，就像一切都是图像。

我开始调试，使用导入的字体时似乎会出现这种情况。这是一个代码笔，可以演示会发生什么 https://codepen.io/phlame-/pen/NWNYbyb

如何复制: 在 Firefox 中打开笔，将页面打印到文件 (CTRL + P)。保存并打开文件。第二段可选择为 Arial，但第一段不是（即 Montserrat）。

似乎如果您尝试在 Chrome 中执行此操作，则没有什么是可选的，但我希望它至少在 1 个浏览器中工作 - 因为只有我会用它来生成 PDF。

我尝试通过 link 标签而不是 CSS 中的 @import 导入字体，试过这个 ，试过不同的 Google 字体（Roboto和拉托），这个：

@media print {
  * {
    user-select: text !important;
  }
}

全部产生相同的结果 - 无法选择的文本。可以使用默认字体选择...

需要说明的是：PDF 中的字体 呈现 ，一切看起来都应该如此，但在文本上单击并拖动时无法选择文本

有没有人有这方面的经验？感谢任何帮助

Answer 1

我 运行 在简历页面上使用 Overlock 时遇到了同样的问题。问题是浏览器打印实用程序无法识别您的页面使用 link 标签即时下载的字体，因为通常使用 google 字体。它只能识别系统字体，这意味着您在 运行 来自 Print 的计算机上安装的字体。

如果您网页上的某些文本使用的字体不在您安装的系统字体列表中，那么您将无法将其另存为 PDF 文件中的文本。当打印实用程序遇到这种情况时，它会将其视为图像。

不同的 OSes 有不同的方法来检查您机器上的字体（[=21= 中的“字体管理器”，Mac 中的“字体书” OS).您可以 google 如何查看计算机上安装的字体，您应该会发现 Montserrat 不是其中之一。

要解决此问题，您需要做的就是在计算机上安装 Montserrat google 字体。 Here 是一组关于如何做到这一点的说明。完成后，您需要重新启动浏览器。