html - 包含文本的 .svg 图像，Firefox 中缺少字体系列

Question

我有 .svg 图像和一些带有自定义字体的文本，我在我的 css 中使用这个图像，这是 div“背景”

http://i.stack.imgur.com/f8EL6.png

在 Chrome 和 Safary 上这个图像工作正常，但在 Mozilla 中我有不同的字体，由于某种原因字体被另一种字体替换

http://i.stack.imgur.com/wUrot.png

它能以某种方式修复吗？问题出在哪里？

Answer 1

当用作图像时，SVG 文件中的所有数据必须位于单个文件中。如果您引用了类似这样的可下载字体...

src: url('http://example.com/fonts/font.otf');

然后您必须将其转换为数据 URL，例如

src: url("data:font/opentype;base64,[base64-encoded font here]");

这样所有的数据都在一个文件中。