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

Question

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

3

在我工作的网站上，我们使用SVG作为标志。我注意到Logo在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代码有什么本质上的问题吗？

- rmlumley

1个回答

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

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

- Paul LeBeau · Accepted Answer

你的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声明，并使用数据URI将字体嵌入SVG。

不过，这个问题有一个更好的解决方案。那就是将文本转换为轮廓（路径）。然后，所有与字体相关的问题都将消失，可以保证在每个人的浏览器中正确地呈现您的标志字体。