将Vue应用打印为pdf时,Google字体可防止选择文本

问题描述

我正在创建一个简单的Vue应用,该应用将用于生成PDF格式的简历。我已经在该项目中添加了Google字体蒙特塞拉特(Montserrat),并且在将该页面打印到文件中(在Firefox中为CTRL + P)时,无法选择文本,就像所有的图像一样。

我开始调试,当我使用导入的字体时,这似乎发生了。这是一个可以演示发生https://codepen.io/phlame-/pen/NWNYbyb

情况的codepen

如何复制:在Firefox中打开笔,然后将页面打印到文件(CTRL + P)。保存并打开文件。第二段可以选择为其Arial,但第一段则不能(蒙特塞拉特)。

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

我尝试通过链接标签而不是CSS中的@import导入字体,尝试了answer,尝试了其他Google字体(Roboto和Lato),

int charNum = 0;

while(!int.TryParse(Console.ReadLine(),out charNum ) || charNum < 0 || charNum >= 6) 
  Console.WriteLine("You had one job,Now enter the number correctly");

全部产生相同的结果-不可选择的文本。可以使用认字体进行选择...

要清楚:PDF中的字体渲染,一切看起来都应该正确,但是在单击并拖动文本时无法选择文本

有人对此有经验吗?感谢您的帮助

解决方法

使用简历页面上的Overlock,我遇到了同样的事情。问题在于,浏览器打印实用程序无法识别使用link标签即时下载页面的字体,这是Google字体的惯常做法。它只能识别系统字体,即您在运行Print的计算机上安装的字体。

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

不同的操作系统具有不同的方法来检查计算机上的字体(Windows中为“字体管理器”,在Mac OS中为“字体书”)。您可以在Google上查看如何查看已在计算机上安装的字体,并且应该发现蒙特塞拉特不是其中一种。

要解决此问题,您所需要做的就是在计算机上安装Montserrat google字体。 Here是有关如何执行此操作的一组指导。完成此操作后,您将需要重新启动浏览器。