Google chrome SVG中的字体有时不'；铬中的t负载

在我工作的网站上，我们使用SVG作为徽标。我注意到有几次，当谷歌Chrome中呈现徽标时，它偶尔会加载不正确的字体。我无法在其他任何地方复制这种情况，但这种情况已经频繁发生，我担心这种情况可能会发生在其他Chrome用户身上

您可以在这里看到SVG：

我通过CSS将SVG作为h1的背景图像加载到以下代码中：

<li class="home"><a href="/" rel="home"><h1><span>Morgridge Institute for Research</span></h1></a></li>

当我直接在浏览器中加载SVG时，它总是以正确的字体工作和加载。也就是说，偶尔在Chrome页面上加载时，字体看起来是错误的。我已经上传了它如何不正确地呈现

---

这是Chrome的已知问题还是建议的解决方法，这样就不会发生这种情况？我的SVG代码本身有什么问题吗？

您的SVG没有使用默认浏览器字体以外的任何字体（通常是Times New Roman）。这是因为SVG没有指定不同的字体

您可能认为SVG中的以下内容正在改变字体：

<style type="text/css">
  @font-face {
    font-family: "Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif";
  }
</style>

但即使你这样做了，唯一会看到“Garamond”、“Baskerville”、“Baskerville Old Face”或“Hoefler Text”的用户将是在电脑上安装了这些字体的用户您可能会看到Garamond（如果您安装了该字体），但大多数人仍然会看到Times New Roman或其他他们默认字体设置为的字体

如果您想使用其他字体，则需要修复

@font-face

声明和声明

---

但是，有一个更好的办法来解决这个问题。这就是将文本转换为大纲（路径）。然后，您对字体的所有担忧都消失了，您可以保证在每个人的浏览器中都能正确地显示您的徽标字体。

是否有将文本转换为路径的工具？任何向量编辑器。插图画家、素描、墨水画。etcI更新了代码笔以反映新的仅路径SVG。谢谢。如果你能保持原样就更好了。现在您已经更改了它，以后阅读此问题的人将无法再看到SVG最初的样子，这使得此答案不再有用。这一点很好。把它换成原来的。这是新代码：

#logo {
  font-family: "Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif";
}