HTML加入WOFF字体文件

Question

我正在获取多个外部 SVG 文档并将它们添加到一个文档中。我得到的 SVG 是由第三方生成的，我无法更改它们。一旦我得到它们，我就可以将它们作为字符串来操作。它们带有这样的嵌入式字体

<style>
@font-face {
    font-family: "ArialNarrow-Bold";
    src: url("data:application/font-woff;charset=utf-8;base64,d09GRg.....");
}
</style>

嵌入的字体似乎没有包含所有字符。它只包含那些存在于其 SVG 文档中的内容。当我添加第二个文档时，如果它具有相同的字体，它还会添加

<style>
@font-face {
    font-family: "ArialNarrow-Bold";
    src: url("data:application/font-woff;charset=utf-8;base64,d09GRg.....");
}
</style>

但对于不同的字符集 - 第二个 SVG 文档中的字符集。

放在一起时，浏览器会忽略第一次定义的font-face，只使用第二种字体。因此，第一个 SVG 中的某些字符未显示。

@font-face 规则（如 unicode-range）没有额外的道具。

节点用于生成最终编译的 SVG 图像。然后在 puppeteer (chrome) 中呈现以生成 PDF。

是否有任何 chrome 标志、html 元标记可以解决此问题？

Answer 1

我最终使用正则表达式 SVG 进行了搜索，并为每个字体系列添加了唯一的字符串（定义它的地方，以及它在文档中使用的地方）。有了这个 - 每个有重复的字体在整个 SVG 文档中都是唯一的。

HTML joining WOFF font files