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

Question

35

我有一个包含某种字体的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)，但是当我将svg用作html img标签或作为html元素的背景时，它会出现错误。

- romeovs

字体URI是否在SVG内部是相对的？如果是这种情况，您应该在检查器的网络选项卡中看到404。 - RoelN

1

字体 URI 被指定为：url("/font/MDN/MDN.ttf")。如果我没记错的话应该可以工作吧？ - romeovs

您可以在矢量编辑软件中将字体转换为路径。 - SeinopSys

@DJDavid98：是的，但我想把它作为最后的选择，Z计划，因为它不具有良好的可扩展性。我将会有很多标志使用相同的字体，但文本略有不同。 - romeovs

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- romeovs · Accepted Answer

根据与相关问题有关的此答案，嵌入式svg图片必须是独立的图片。如上面的评论中所提到的，可以通过将所有外部资产嵌入到其中来使svg“独立”。因此，在我的情况下，我必须做这些事情之一：

使用数据uri嵌入字体：src：url（“data：application / font-woff; base64，<base64编码字体在此处”），
将字体嵌入为svg字形，但我已经排除了这种方法，因为缺乏Firefox支持
在我的编辑软件中将字体转换为路径（例如Adobe Illustrator中的展开路径）。

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

绕过整个问题的另一个解决方案是使用html object标记而不是img标记。这样，svg被允许不仅是独立的图像，还可以使用完整的xml包含方法来包含其他资产。如上述问题中已经指出的。

我选择使用object方法嵌入svg。如果我发现这样做与使用适当的img元素有根本性的区别，我会更新这个答案。