SVG文件自定义字体未在html中显示答案

【问题标题】：SVG file custom font not showing in htmlSVG文件自定义字体未在html中显示
【发布时间】：2016-01-29 12:27:07
【问题描述】：

我的目标：在 Chrome（电子）中从 html 页面将 SVG 打印到单个页面（任何纸张大小）全尺寸。

我正在努力实现这个目标，这是我的故事：

我生成了一个 SVG，其中包含应该以特定字体显示的文本。这是我包含在 css 中的自定义字体（使用 Font Squirrel），也用于网站中的文本。当我在我的网站内联显示 SVG 时，字体呈现良好。

内联意味着它是一个元素，是你可以检查的 dom 的一部分。这个问题是你不能真正改变宽度样式而不必重新渲染 svg。因为我想打印它，所以能够只做 'width=100%' 就好了。

为此，我将 SVG 序列化为 dataURL，并使用 an 并将其 src 设置为 dataURL。现在我可以设置我想要的宽度。但是：自定义字体不再起作用了！

所以我将 SVG img 保存到文件中进行编辑。显然，您可以在 SVG 中包含 css，这就是我所做的。然后，当您直接在浏览器中打开文件时，它会再次正常工作。但是，当您在网页的 IMG 中打开它时，字体不再起作用。

接下来我尝试将 svg 字体直接复制到文件中（字形的东西......）。是的，这行得通！哦，不，不是，只是在 Safari 中而不是在 Chrome 中，该死。

目前我正在考虑将其栅格化，但这当然不是一个好的解决方案。

正如你所理解的，我在这里有点沮丧。谁能给我关于 SVG 字体问题的见解，或者您有关于打印的任何提示吗？

【问题讨论】：

【解决方案1】：

好的，我找到了解决方案。

事实证明，出于安全原因，在 IMG 元素中引用的文件不能包含任何外部文件。这就是为什么在将 SVG 显示为 IMG 时在 SVG 中引用 CSS 不起作用的原因。

Chrome 也放弃了对 SVG 字体的支持。因此，即使您在 SVG 图像中复制/粘贴 SVG 字形数据，它仍然无法正常工作（真的很愚蠢）。但在 Safari 中这可以工作。

所以你需要在 css 中引用 WOFF 字体作为 dataURL (base64)。我之前确实尝试过，但显然我做错了什么。我又试了一次，它起作用了:)。

我使用 FontSquirrel 来生成这个，我还对那里的字体进行了子集化，只包含我实际需要节省空间的字符。

复制字体而不是引用当然不是很有效，但我可以忍受。

【讨论】：

【解决方案2】：

最简单的解决方案是通过将文本转换为 SVG 路径，在 SVG 中不包含任何“文本”。

您可以在 Inkscape 中通过选择文本然后转到路径->对象到路径来执行此操作。然后将所有内容保存或导出到一个新文件中，清除浏览器缓存，刷新，现在您应该可以看到您的文本了。

【讨论】：