HTML 加入 WOFF 字体文件

Question

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

<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 文档中的字符集。

当它们放在一起时，浏览器将忽略第一次定义的字体，而只使用第二种字体。 因此，第一个 SVG 中的某些字符不会显示。

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

Node 用于生成最终编译的 SVG 图像。 然后在 puppeteer (chrome) 中渲染以生成 PDF。

是否有任何 chrome 标志，html 元标记，可以解决这个问题？

Answer 1

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