Svg不会使用已安​​装的webfont

Question

我将我的标题转换为.svg，因为它在IE浏览器中看起来很糟糕。

.svg中有字体，但我已经通过Dreamweaver安装了字体，字体在其他地方工作正常。

看看HERE。 （你必须将眉毛缩小到宽度不足800px才能看到它）你可以看到＆＃34;祈祷池塘＆＃34;用正确的字体写在正文中，但标题没有正确的字体。我不能为我的生活找出原因。

您还可以注意到SVG图像中的OTHER字体工作正常，我以完全相同的方式安装它。

这里是处理字体的.svg的一部分：

    <text transform="matrix(0.808 0 0 1 221.228 97.4204)" fill="#B4D1E4" stroke="#B4D1E4" font-family="'ConeriaScript_Slanted'" font-size="83.2657">Prayer</text>


<text transform="matrix(0.808 0 0 1 517.98 96.3726)" fill="#B4D1E4" stroke="#B4D1E4" font-family="'ConeriaScript_Slanted'" font-size="83.2657">Pond</text>

这里的文字CSS下方有相同的字体（有效）：

.temp {

        font-family: "ConeriaScript_Slanted";

        font-size: xx-large;

        color: #FFF;   

    }

任何线索可能会发生在这里？

Answer 1

原因很简单。 SVG不知道“ConeriaScript_Slanted”是什么字体。如果您在页面中内联了SVG，那么它会，因为它会从HTML中的CSS中了解它。但是SVG正在加载为<img>（实际上是background-image），因此它所知道的只是SVG文件本身的内容。 CSS不会跨越文档边界。

不幸的是，修复并不像向SVG添加@font-face规则那么简单。通过<img>嵌入的SVG必须是自包含的。他们不能参考外部资源（出于隐私原因）。您仍然可以使用@font-face，但网址必须是数据网址。

请参阅：https://stackoverflow.com/a/20587895/1292848