svg @font-face 在 svg 中有效，但在包含在页面中时无效

Question

我有一个 svg 文件，其中包含使用

@font-face

语法的某种字体。该 svg 位于

/logo/logo-big-web.svg

，字体位于服务器上的

/font/MDN/MDN.ttf

。

当我在浏览器中打开

http://www.mywebsite/logo/logo-big-web.svg

时一切正常，字体加载正确并且 svg 文件正确显示。

但是，当我尝试将 svg 文件嵌入 html 文件中时，例如在

index.html

中：

<img src="/logo/logo-big-web.svg" ... ></img>

当我在浏览器中打开

http://www.mywebsite/index.html

时，字体无法正确加载，并且 svg 显示丑陋的默认字体。

还有其他人遇到过这个问题吗？如何解决这个问题？

我知道我可以将字体作为 svg 字形嵌入到 svg 文件中，但这在 Firefox 中不起作用，并且在我加载字体以在网页本身上使用时会增加很多 svg 的文件大小（它加载字体两次似乎很浪费）。因此嵌入字形是没有选择的。嵌入式

data:

uri 也是如此。

更新：

字体在svg文件中指定为：

<defs>
    <style>
        @font-face {
            font-family: MDN;
            src: url("/font/MDN/MDN.ttf"); }
    </style>
</defs>

我按如下方式使用它：

<text font-family="MDN" font-size="11"> <textPath ... > ... </textPath> </text>

更新2：

我尝试通过在单独的样式表中定义字体来规避这个问题，并像这样包含它：

<?xml-stylesheet type="text/css" href="/style/slyle.css" ?>

但这似乎有同样的问题：当我直接在浏览器中打开 svg 时它可以工作 (

http://www.mywebsite/logo/logo-big-web.svg

) 但是当我在 html

img

标签中使用 svg 或作为 html 元素的背景时，就会崩溃。

Answer 1

根据相关问题的答案，嵌入 svg 图像必须是独立图像。正如上面评论中提到的，可以通过将所有外部资源嵌入到 svg 中来使其“独立”。所以就我而言，我必须执行以下任一操作：

1. 使用数据 uri 嵌入字体：

   src: url("data:application/font-woff;base64,<base64 encoded font here")

   ，
2. 将字体嵌入为 svg 字形，我已经排除了，因为缺乏 Firefox 支持
在我的编辑软件中
3. 将字体转换为路径（例如adobe illustrator中的展开路径）。

这些方法似乎没有一种令人满意，因为我真的很喜欢使 svg 文件尽可能轻量。

解决整个问题的另一个解决方案是使用 html

object

标签而不是

img

标签。这样，svg 就可以不仅仅是一个独立的图像，它可以使用全方位的 xml 包含方法来包含其他资源。 这已经在上述问题中指出了。

我选择使用

object

嵌入svg的方法。如果我发现这样做有根本性的错误，而不是使用正确的

img

元素，我会更新这个答案。

Answer 2

在我看来，当 svg 包含字体时，最简单的方法是矢量化字体（Adobe xd 示例：）并重新导出整个内容。