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>

我试图通过在单独的样式表中定义字体来规避问题,并将其包括在内:

<?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'独立'.所以在我的情况下,我必须做以下任何一件事:

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

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

绕过整个问题的另一个解决方案是使用html object标签而不是img标签.这样,允许svg不仅仅是一个独立的图像,它可以使用全范围的xml包含方法来包含其他资源.在上述问题中已经指出了这一点.

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