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图像必须是独立的图像。正如上面的评论中提到的，可以通过将所有外部资产嵌入其中来使svg'独立'。所以在我的情况下，我必须做以下任何一件事：

使用数据uri嵌入字体：src: url("data:application/font-woff;base64,<base64 encoded font here")，
将字体嵌入为svg字形，我已经排除了因为缺少firefox支持
将字体转换为路径（例如，adobe illustrator中的展开路径）。

这些方法中没有一个看起来令人满意，因为我真的希望尽可能保持svg文件的轻量级。

绕过整个问题的另一个解决方案是使用html object标记而不是img标记。这样，允许svg不仅仅是一个独立的图像，它可以使用全范围的xml包含方法来包含其他资源。 This was pointed out already in the aforementioned question

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