SVG中的字体有时无法在Chrome中加载

Question

在我工作的网站上，我们使用SVG作为徽标。我曾经多次注意到徽标在Google Chrome中呈现时偶尔会加载正确的字体。我还没有能够在其他任何地方复制它，但它经常发生，我担心它可能会发生在其他Chrome用户身上。

您可以在此处查看SVG：https://jsfiddle.net/rmlumley/8n5Lrq9z/

我在这个代码中通过CSS加载SVG作为h1的背景图片：

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

当我直接在浏览器中加载SVG时，它始终可以正常工作并加载正确的字体。也就是说，偶尔当它加载到Chrome中的页面时 - 字体看起来不对。我已经上传了它呈现错误的方式。

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

Answer 1

您的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>

但这无济于事。它应该是这样的：

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

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

如果您想使用其他字体，则需要修复@font-face 声明和use Data URIs to embed your font in the SVG。

但是，对这个问题有一个更好的解决方案。那就是将文本转换为轮廓（路径）。然后，您所有的字体担忧都会消失，并且您可以保证在每个人的浏览器中都能正确显示您的徽标字体。