Safari 使用不同的字体呈现 SVG 中的文本

Question

我\xe2\x80\x99m 在网站上使用 SVG，除了 Safari 之外，一切正常。Safari 显示我的 SVG 的字体与我用于图形的字体完全不同。

\n\n

正确渲染

\n\n

这就是它\xe2\x80\x99s 应该显示的方式。

\n\n

Safari 渲染

\n\n

这就是 Safari 呈现它的方式。

\n\n

我在网页设计中没有使用 SVG 的丰富经验，但我使用 CSS 将其设置为背景图像，就像我想要的那样。我可以\xe2\x80\x99t弄清楚我\xe2\x80\x99m做错了什么。

\n\n

.titleContainer{\n  background-image: url(\xe2\x80\x98../img/logo.svg\xe2\x80\x99)\n}\n

\n

Answer 1

这很可能是因为当您从设计程序导出 SVG 时应该“转换为轮廓”。我可以想象您选择嵌入字体。

即在 Adob​​e Illustrator 中，您可以选择在导出时勾画字体轮廓：

Adobe Illustrator 示例