当我在浏览器中打开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的文件大小中添加了很多东西,无论如何都要在网页本身上使用(似乎浪费两次加载字体).所以嵌入字形是没有选择的.嵌入式数据也是如此：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元素的背景时会崩溃.
解决方法
>使用数据uri嵌入字体：src：url(“data：application / font-woff; base64,< base64 encoded font here”),
>将字体嵌入为svg字形,我已经排除了因为缺乏firefox支持
>将字体转换为编辑软件中的路径(例如,在adobe illustrator中展开路径).
这些方法中没有一个看起来令人满意,因为我真的希望保持svg文件尽可能轻量级.
绕过整个问题的另一个解决方案是使用html对象标签而不是img标签.这样,允许svg不仅仅是一个独立的图像,它可以使用全范围的xml包含方法来包含其他资源. This was pointed out already in the aforementioned question.
