css - 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

根据 this answer to a related question , 嵌入 svg 图像必须是独立图像。正如上面评论中提到的，可以通过将所有外部 Assets 嵌入其中来使 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 包含方法来包含其他 Assets 。 This was pointed out already in the aforementioned question .

我选择使用 object嵌入svg的方法。如果我发现这样做有根本性的错误而不是使用正确的 img，我会更新这个答案。元素。